Make The Body Div Fill The Available Area

I'm working on a brand new website and I'm trying to just get the basic layout going. I am using the ASP.NET MVC 4 generated HTML and I would like to get the DIV named body to fill

Solution 1:

Just snap the header and footer at the bottom of the page using fixed positioning.

header, footer{ position:fixed; left:0; right:0; z-index:1; }
header{ top:0; }
footer{ bottom:0; }

Then you can give your body the background your div#body had before. The div gets no background and will expand as much as needed.

div#body{ background:none; }
body{ background:#eee; }

This will look like the div would fill the remaining space of the page. Finally give your header and footer a background so that you can't see the background of the body under it.

header, footer{ background:#fff; }

By the way I would suggest removing body margins. body{ margin:0; }

Solution 2:

I believe it's a bit impossible to do that with just CSS. You can make a webpage with 100% height like this:

html{
    height: 100%;
}

body{
    height: 100%;
}

#body{
    height: 100%;
}

And then for header, body and footer you can do like this:

header{
  height: 100px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: #f00;
}

#body{
  bottom: 100px;
  left: 0;
  position: absolute;
  right: 0;
  top: 100px;
  background-color: #fff;
}

footer{
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
  background-color: #ff0;
}

It might work for a bit, but it'll break at some point. When you resize your browser, it'll be running out of room for your #body. If you want a better solution, you should use javascript. In your javascript, calculate how much space you have for your #body, then either adjust the height of header and footer. Or adjust the #body instead.