Many designers have come across this issue several times in their career. How do you make your div fill up the entire height of your browser window? The answer is very simple, but not so obvious.
HTML
<div id="main">
<div class="content">
A div thats height is %100 of the screen!
</div>
</div>
CSS
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
background: url("bg.gif");
font-family: Arial, Verdana, sans-serif;
}
#main {
background: #f1f1f1;
width: 960px;
margin: auto;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 0 10px 0 10px;
min-height: 100%;
}
.content {
padding-top: 10px;
}
