我如何有一个固定高度的标题，其内容div占用剩余空间的100％？

Question

在开始之前，我知道这里有很多与此相关的问题，但我觉得答案很严重。 他们至少对我没有意义，或者他们没有实现我想要的。 如果您知道重复出现的可靠解决方案的问题，那么我会很想念它。 我将删除此一个。

如果我有以下HTML ...

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

简而言之，我如何才能使标题占据视口高度的50像素，并使内容部分填充不带滚动条的视口高度的其余部分？ 理想情况下，这将在IE6中工作并且没有表。 谢谢！

Answer 1

这似乎为我工作：

<html>
    <body>
        <div style="height:60px; position:fixed; width:100%;"></div>
        <div style="height:100%; width:100%;">
            <p style="padding-top:60px;">hola</p>
        </div>
    </body>
</html>

Answer 2

不确定这是否是您需要的内容，但是它将导致#content占据所有视口，并且其中包含#header，那么您要放入#content中的所有内容都会出现在header之后。

 <html> <head> <title>Test</title> <style type="text/css"> body, html { height: 100%; } body { margin: 0; padding: 0; } #header { height: 50px; background: green; width: 100%; } #content { background: blue; position: relative; min-height: 100%; height: auto !important; height: 100%; } </style> </head> <body> <div id="content"> <div id="header">I am the header</div> <p>first bit of content</p> </div> </body> </html>

height：自动！重要 高度：100％; 位是IE 6的理想选择，那就是比仅使用IE条件注释的针对IE 6的样式表更好。

我如何有一个固定高度的标题，其内容div占用剩余空间的100％？

问题描述

2 个解决方案

解决方案1
3 已采纳 2010-12-06 22:17:50

解决方案2
2 2010-12-06 22:54:11

我如何有一个固定高度的标题，其内容div占用剩余空间的100％？

问题描述

2 个解决方案

解决方案1 3 已采纳 2010-12-06 22:17:50

解决方案2 2 2010-12-06 22:54:11

解决方案1
3 已采纳 2010-12-06 22:17:50

解决方案2
2 2010-12-06 22:54:11