Hello,
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.
Don't use absolute positioning for footers, tying them to the viewport (which is what bottom: 0px does).
If you want a footer at the bottom of the viewport, or the bottom of the content (whichever is longer), use sticky footers.
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.
#footer {
.....
min-height: 18px;
}
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!