CSS min-height 100%,带有多个div

好的 . 我试图让页面显示视口高度的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和容器div设置为“height:100%”,然后将内容div设置为min-height:100%和height:100%但这只会使div扩展到100%视口,然后页脚被向下推80px(因为 Headers 是80px),所以整页最终为100%160px(两个80px div) .

有任何想法吗?干杯 .

回答(5)

3 years ago

您可以使用简单的 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;
}

3 years ago

原帖这里: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;
}

3 years ago

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

3 years ago

*{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的媒体查询来简化小屏幕的设计来解决此问题 .

3 years ago

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

  • 使用表格基础布局(完全支持,但不赞成)

  • 使用新的CSS 3 flex框布局(没有旧的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;
}