Question

I feel like I shouldn’t be asking such a simple question but I can’t find any simple answers out there.

I have a header which can be any height. The content beneath it needs to fill up the remaining space on the page (Both are contained in a necessary container div). How can this be achieved with HTML and CSS? I would consider JavaScript but I want resizing to be automatic when content is added, or the window is resized etc.

HTML code:

<div id="container" >

    <div id="header" >
      <br/>
      <br/>
      ...variable content in the header (not necessarily text)...
      <br/>
      <br/>
    </div>

    <div id="content"></div>

</div>

CSS code:

#container
{
  background-color:blue; 
  width:100%; 
  height:100%;
}

#header
{
  background-color:green;
  width:100%; 
  height:auto;
}

#content
{
  background-color:red; 
  width:100%;
  height:100px; /*The height here needs to fill the remaining space in the container div*/
}

Answer 1

I think this may help do what you want to do: http://jsfiddle.net/AGLDV/3/

html, body {
  height:100%;
}

#container {
  width:100%;
  height:100%;
  background:#ccc;
  display:table;
}

#header {
  height:1%;
  width:100%;
  background:blue;
  display:table-row;
}

#content {
  width:100%;
  background:red;
  display:table-row;
}