Question

我想要实现的布局非常简单。我想要一个带标题的100％高度布局，在标题下面我将有一个用于导航的侧栏，然后是导航栏旁边的内容区域（带有标题的2列）。如果我给标题指定一个高度，我可以很容易地做到这一点，但我希望标题占用尽可能多的空间。有谁知道如何做到这一点？是否有可能在不知道标题的高度的情况下？

感谢您的帮助。

Answer 1

这应该这样做

<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>

CSS - 具有可变高度标题的100％高度布局

1 个答案: