Question

好。我试图让页面显示视口高度的100％，但是抓取的是页面有多个并不总是嵌套的div。我一直在浏览多个问题和其他网站，但我找不到符合我需求的答案。

我目前的布局如下：

<html>
<body>
    <div class="container">
         <div class="header">
         </div>
         <div class="content">
         </div>
         <div class="footer">
         </div>
    </div>
</body>
</html>

页眉和页脚的每个80px，我试图让内容div填充视口的其余部分。我试过设置html，body，＆amp;容器div分别为“height：100％”，然后将内容div设置为min-height：100％和height：100％但这只是使div扩展到视口的100％，然后页脚被推下来80px（因为标题是80px），所以整页最终为100％+ 160px（两个80px div）。

有什么想法吗？欢呼声。

Answer 1

您可以使用简单的display:table属性执行此操作。

检查一下：

http://jsfiddle.net/HebB6/1/

html,
body,
.container {
    height: 100%;
    background-color: yellow;
}

.container {
    position: relative;
    display:table;
    width:100%;
}

.content {
    background-color: blue;
}

.header {
    height: 80px;
    background-color: red;
}

.footer {
    height: 80px;
    background-color: green;
}
.content, .header, .footer{
    display:table-row;
}

Answer 2

原帖在这里：http://peterned.home.xs4all.nl/examples/csslayout1.html

http://jsfiddle.net/cLu3W/4/

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
}
div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}

Answer 3

我现在没有chrome，这似乎没有在jsfiddle中工作但你应该能够通过使所有绝对定位，头部顶部设置为0px，页脚底部为0px来实现这一点，并且内容有顶部：80px，底部80px。你还必须使容器，主体和可能的html占据100％的高度，并具有绝对或相对的定位。

Answer 4

 *{margin:0; padding:0;}
 .header{height:80px;  background:salmon; position:relative; z-index:10;}
 .content{background:gray; height:100%; margin-top:-80px;}
 .content:before{content:''; display:block; height:80px; width:100%;}
 .footer{height:80px; width:100%; background:lightblue; position:absolute; bottom:0;}

这并不完美。例如，文本溢出.content时发生的情况实际上并不理想，但您可以通过使用基于height的媒体查询来简化较小屏幕的设计来解决此问题。

Answer 5

这可以通过多种方式实现：

使用表格基础布局（完全支持但不赞成）
使用新的CSS 3弹性框布局（没有旧的IE支持）
使用绝对定位

我会推荐第3个选项。请参阅http://jsfiddle.net/HebB6/

上的示例

HTML：

<html>
<body>
    <div class="container">
         <div class="header">
             Header
         </div>
         <div class="content">
             Content
         </div>
         <div class="footer">
             Footer
         </div>
    </div>
</body>
</html>

CSS：

html,
body,
.container {
    height: 100%;
    background-color: yellow;
}

.container {
    position: relative;
}

.content {
    background-color: blue;
    position: absolute;
    top: 80px;
    bottom: 80px;
    left: 0;
    right: 0;
}

.header {
    height: 80px;
    background-color: red;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.footer {
    height: 80px;
    background-color: green;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

CSS min-height 100％，带有多个div

5 个答案:

http://jsfiddle.net/HebB6/1/