Reputation: 2599

CSS problem with page footer

I have defined my page footer in the css file as:

#footer {
  position: absolute;
  height: 50px;
  text-align: center;
  background: #66CCCC;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 18px;
}

Now if more data gets added to the page, it moves below the footer, and the footer stays where it is. Any way to fix this ?

Thank You.

Upvotes: 0

Answers (4)

Scott

Reputation: 2183

If you're looking for purely CSS you could do the following:

HTML File:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="Stylesheet" href="Site.css" runat="server" rev="Stylesheet" type="text/css" />
</head>
<body>
    <div id="Page">
        <div id="Header">
            This is my "Header Content"!
        </div>
        <div id="Content">
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
        </div>
        <div id="footer">
            This is my "Footer Content"!
        </div>      
    </div>
</body>
</html>

CSS (Site.css):

#Page
{
    background-color: Red;
}

#Header
{
    background-color: Purple;
    color: White;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 75px;
    font-size: xx-large;    
    text-align: center;
}

#Content
{
    background-color: Lime;
    position: absolute;
    top: 75px;
    left: 0px;
    right: 0px;
    bottom: 50px;
    overflow: auto;
}

#footer
{
    position: absolute;
    text-align: center;
    background: #66CCCC;
    height: 50px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

I of course set up the colors and positions in odd ways to show where the divs meet. When you add content to the page, add it to the content area, and since we have the overflow: auto; for the content div, it will scroll and your header / footer will be static.

Hope this helps!

Upvotes: 0

o.k.w

Reputation: 25820

Why do you have 2 definition for height? Another way is to set min-height so that its height can 'grow' with the content while not go less than certain height.