Online Portfolio and Resource Blog

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;
}

Click here for the result