CSS min-height 100% with multiple divs答案

【问题标题】：CSS min-height 100% with multiple divsCSS min-height 100% with multiple divs
【发布时间】：2011-11-25 12:17:09
【问题描述】：

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

我目前的布局是这样的：

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

由于页眉和页脚各为 80 像素，我试图让内容 div 填充视口的其余部分。我尝试将 html、body 和容器 div 分别设置为“height:100%”，然后将内容 div 设置为 min-height:100% 和 height:100%，但这只会使 div 扩展到 100%视口，然后页脚被向下推 80 像素（因为页眉是 80 像素），所以整个页面最终为 100% + 160 像素（两个 80 像素的 div）。

有什么想法吗？干杯。

【问题讨论】：

标签： html height css

【解决方案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;
}

【讨论】：

令人惊讶的是，这是我认为最优雅的一个！谢谢，是的，它确实有效。

【解决方案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;
}

【讨论】：

我怀疑这些都是你写的；）你能注明作者吗？
:D 你自己写所有的代码吗？我可以发布一个指向该页面的直接链接，但几周后我看到了一个帖子，有人只回答了一个链接，他从版主那里得到了一个 -1 的问题： - 如果该网站将来会关闭?在这里粘贴一些代码......我在这里做了这样的，粘贴了代码等等:)
实际上，是的，我愿意。我编写并回收我的解决方案。只需感谢作者。链接到页面并调用答案是不赞成，但链接到页面并提供一些代码/文本是可以的。
只是一点点，我已经保存了这个页面，因为我前一段时间在我的工作中需要它.. 所以.. 我会提供一个链接，我还有其他链接关闭的帖子当然，但在这里我找不到它。您对作者的功劳绝对正确。
好了，它在第一行。

【解决方案3】：

我现在没有 chrome，这似乎在 jsfiddle 中不起作用，但您应该能够通过使所有绝对定位、将页眉顶部设置为 0px、页脚底部设置为 0px 来实现这一点，并且内容有顶部：80px，底部 80px。您还必须使容器、正文和可能的 html 占据 100% 的高度并具有绝对或相对定位。

【讨论】：

【解决方案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 的媒体查询来简化小屏幕的设计来解决这个问题。

【讨论】：

【解决方案5】：

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

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

我会推荐第三个选项。查看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;
}

【讨论】：