Set footer at the bottom of the window?

Hi
I encountered a problem setting the div footer at the bottom of the window, not the page. Partitularly when the body content has much stuff.

I google some useful stuff from this form, but it did not work for my purpose entirely. Here is the example, the content is very long, it's just for testing.

my problem here,
If the table has many rows, the footer doesn't display at the windows bottom.
what I wannted is, if the table has many stuff, the div(contain the table) has the scrollbar, the footer is still at the bottom of the window, no matter I changed the size of the window.
Ideas are appreciated.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body{height: 100%; width: 100%; border: 0; padding: 0; margin: 0; background: #fcc;}
#spacer{
display: block;
height: 95%;
width: 1px;
padding: 0;
margin: 0;
border: 0;
background: #fff; /* same as body bg */
float: right;
}

#bodycontent {
width: 100%;
margin: 0;
padding: 0;
border: 0;
float: right;
margin-right: -1px; /* this is the key to avoid the 1px jog caused by spacer */
}

#bodyarea{
margin: 0px;
background: #fcc;
padding-top: 50px;
width: 100%;
}

#leftcol{float:left; width: 20%;}
#rightcol{float:left; width: 20%;}
#centercol{float:left; width: 100%; overflow:auto;background: #ffe;}
#centercol h4{ width: 100%; background: yellow; text-align: center;}
#centercol p{padding: 10px;}

#footer{
display: block;
clear: both;
width: 100%;
padding: 0;
margin: 0;
background: #ddd;
text-align: center;
margin-right: 0px;
}

#footer p{background: #ddd;}

#header{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
background: purple;
color: white;
z-index: 50;
}

#leftmenu{
position: absolute;
top: 100px;
left: 0px;
width: 20%;
background: #ccc;
}

#rightmenu{
position: absolute;
top: 150px;
right: 0px;
width: 20%;
background: #ccc;
}

img{display: block;}

</style>
</head>
<script type='text/javascript'>

</script>

[1][edited by: tonyutada at 10:01 am (utc) on Dec. 5, 2006]

Set footer at the bottom of the window?

tonyutada

tonyutada

tonyutada

sldesigns

tonyutada

nigassma

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week