CSS - 可变高度头100％高度布局

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

感谢您的任何帮助。

来源

2010-06-03 Brian DiCasa

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

来源

2010-06-03 21:06:45 alejandrobog

同意。身体100％高度是关键的原因是，如果没有它，浏览器无法计算#container的100％含义，并且默认为浏览器窗口的高度，这不是您想要的。对身体的身高声明（身高：100％！重要;）和/或有用的评论重要，这对未来的开发人员来说可能是值得的。 – 2010-06-04 03:59:24

谢谢！对于任何试图做到这一点的人来说，alejandrobog和Dan M都提到身体上的100％是关键。我看过的东西是位置：固定在容器上。 – 2010-06-04 15:58:37

这个布局实际上隐藏了表格的底部（大概与标题的高度相同）。因此我不会说这是可变高度标题问题的解决方案。 – 2012-03-19 11:35:04

CSS - 可变高度头100％高度布局

回答

相关问题