Forum Moderators: not2easy
header {
height: 200px;
}
body {
height: ;
}
footer {
height: 100% of remaining space;
min-height: 25px;
}
However:
You may need to compensate for rendering issues depending upon your addition of margins, borders, actual content..... The framework is sound though.
NOTE: If you exceed the capacity of #body-content there will be trouble. (Call that a 'homework exercise":))
<html>
<head>
<style>
body {
font-size: 100%;
}
#wrapper {
position: relative; height: 100%;
}#header {
height: 200px; background-color: #888;
}#body-content {
background-color: #ddd;
}#footer {
height: 150px; position: absolute; bottom: 0; background-color: #bbb; width: 100%; border: .2em solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
HEADER - MAYBE LOGO
</div>
<div id="body-content">
BODY CONTENT
</div>
<div id="footer">
FOOTER
</div>
</div>
<!--
I have a simple css design where there is a header, body and footer. Right now the footer is about 13px high. On an avgscreen it could take up about 150px in height. I would like to know if there is a way to make it stretch down to
automatically fill in the remaining footer space. It has a dark gray background and right now you see it then white below.
So it would seem like there would be a simple way to do something like this
-->
</body>
</html>
For instance if the content of one page is only 400 px high then then footer fills in all the area below and stretches to the bottom. If the content fills up more than the page and needs to scroll down than the footer has a minimum height that goes into effect.
