css页面布局

Question

<div class="header">
    <div class="layout">头部</div>
</div>
<div class="main layout">内容</div>
<div class="footer"></div>

.header {
            background: blue;
            height: 80px;
        }
        .main {
            background: red;
            height: 500px;
        }
        .footer {
            background: green;
            height: 80px;
        }
        .layout {
            width: 960px;
            margin: 15px auto;
            border: 3px solid black;
        }

如何实现内容区域高度自动填充到底部？

Answer 1

<div class="header">
    <div class="layout">头部</div>
</div>
<div class="main"><div class="layout">内容</div></div>
<div class="footer"></div>

html,body{
    width:100%;
    height:100%;
    position:relative;
}
.header {
   background: blue;
   height: 80px;
    position:absolute;
    z-index:2
 }
 .main {
    width:100%;
    height:100%;
    background: red;
    box-sizing:border-box;
    padding:80px 0;
}
.footer {
    background: green;
    height:80px;
    position:absolute;
    z-index:2;
    bottom:0;
}
        .layout {
            width: 960px;
            margin: 95px auto;
            border: 3px solid black;
        }

Answer 2

        .main {
            background: red;
            min-height: 800px;
        }

Answer 3

1.首先要把.main里的height去掉

.layout { min-height: 98%;}

百分比的数字可以根据实际效果调整。

2.js算window的高度
用window的 resize 方法监测窗口的高度变化，内容区的高度就等于window的height减去header和footer的height

Answer 4

粗暴一点可以用定位，可以实现效果