View Full Version : Div fit to remaining space

Nov 2nd, 2009, 11:13 PM
I have div#header and div#main as a two row layout.

div#header has height:100px; width:100%;
How can I get div#main to fill the remainder of the space?


Nov 3rd, 2009, 08:26 AM

Nov 3rd, 2009, 08:43 AM
Hello tomrshl,
Assuming #main is also 100% wide, filling the rest of the space vertically can be as done just by telling it to be 100% too.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
font: 14px "Comic Sans MS";
background: #FC6;
* {
margin: 0;
padding: 0;
border: none;
#main {
width: 100%;
height: 100%;
background: #999;
#header {
height: 100px;
background: #f00;
<div id="main">
<div id="header">
<!--end header--></div>
<!--end main--></div>

Not sure how well it works when you start putting stuff in it though. If you're looking for a full height solution, have a look at this example - http://nopeople.com/CSS/full-height-layout/index.html