CSS - 100% Height Layout with Variable Height Header_问答_开发者

CSS - 100% Height Layout with Variable Height Header

开发者 https://www.devze.com 2023-01-02 18:15 出处：网络

相关专题：css

The layout I want to achieve is pretty simple. I want a 100% height layout with a header, and below the header I will have a side bar for na开发者_如何学运维vigation and then the content area beside the navigation bar (2-column with header). I can easily do this if I give the header a specified height but I want the header to just take up as much room as is needed. Does anyone know how to do this? Is it possible without knowing the height of the header?

Thanks for any help.

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>