Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style>
html,body
{
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
#frame
{
width:909px;
margin:0px auto -219px;
position:relative;
min-height: 100%;
height: auto !important;
height: 100%;
background-color: blue;
}
#header
{
width:909px;
height:200px;
background-color:yellow;
}
#outercontent
{
background-color:red;
padding:30px;
}
#innercontent
{
}
#footer,#push {
height: 219px; /* .push must be the same height as .footer */
}
#footer {
position:relative;
background-color:pink;
width:909px;
margin:0px auto;
z-index:999;
}
</style>
</head>
<body>
<div id="frame">
<div id="header"></div>
<div id="outercontent">
<div id="innercontent">[!CONTENT!]
this should be red, and stretched to the bottom and touch the footer <br />
</div>
</div>
<div id="push"></div>
</div>
<div id="footer">This footer is sticky</div>
</body>
</html>
#frame {
width:909px;
margin:0px auto -219px;
position:relative;
min-height: 100%;
background-color:red;
}
* html #frame{height:100%}
(BTW I would avoid Ryan Fait's sticky footer version as it has a number of issues in ie7/8 and opera.)Interesting point Paul (and good to see you back). I don't do sticky footers, but usually when that one turns up here it is a problem. Can you identify the issues - or is it best to leave in the "avoid" catagory?
I just saw the thread while doing a search and couldn't resist answeringWell, I'm a bit biased, but I don't think anyone should resist at all ;) Please set your preferences to be automatically notified of new posts to the css forum - and indulge the temptation to participate as much as possible!
