ansaurus

Question

CSS - 100% Height Layout with Variable Height Header

Answer 1

+1 A:

This should do it

<style type="text/css" media="screen">
body
{
  margin: 0;
  padding: 0;
  height: 100%; /* this is the key! */
  width: 100%;
}
#container
{
  position: fixed;
  height: 100%;
  width: 100%;
  background: #eaeaea;
}
#header
{
  background: #000000;
}
</style>

<body>
  <div id="header">
    <br />
    <br />
    <br />
    <br />
  </div>
  <div id="container">
    <table width="100%" style="height: 100%;">
      <tr>
         <td style="background: #ff0000; width: 250px;">
             col1
         </td>
         <td style="background: #00ff00;">
             col2
         </td>
      </tr>
    </table>
  </div>
</body>

alejandrobog 2010-06-03 21:06:45

Agreed. The reason that the 100% height on the body is key is that without it, the browser has no way to calculate what 100% means for #container and defaults to the height of the browser window, which is not what you want. It's probably worth tacking !important onto the body's height declaration (height: 100% !important;) and/or a helpful comment so that future developers know not to mess with it.

Dan M 2010-06-04 03:59:24

Thanks! For anyone else trying to do this as alejandrobog and Dan M mentioned the 100% on the body is key. The thing I over looked though was the position: fixed on the container.

Brian D. 2010-06-04 15:58:37

ansaurus

tags:

views:

answers:

CSS - 100% Height Layout with Variable Height Header

related questions