首页 文章

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

提问于
浏览 次
5

好的 . 我试图让页面显示视口高度的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） .

有任何想法吗？干杯 .

html height css

5 回答

  • 0

    您可以使用简单的 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;
}
    回复于
  • 0

    原帖这里：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;
}
    回复于
  • 4

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

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

    回复于
  • 1

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

    • 使用表格基础布局（完全支持，但不赞成）

    • 使用新的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;
}
    回复于

相关问题