小编典典
使用flexbox，这很容易实现。
将包含3个隔层的包装器display: flex;的高度设置为100%或100vh。包装器的高度将填满整个高度，这display:
flex;将使该包装器的所有子级具有适当的flex-properties(例如flex:1;)，由flexbox-magic控制。
标记示例：
I'm a 30px tall header
I'm the main-content filling the void!
I'm a 30px tall footer
和CSS一起：
.wrapper {
height: 100vh;
display: flex;
/* Direction of the items, can be row or column */
flex-direction: column;
}
header,
footer {
height: 30px;
}
main {
flex: 1;
}
-[下面的旧答案]-
Layout
header {
height: 30px;
background: green;
}
footer {
height: 30px;
background: red;
}
I am a header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.
I am a footer
适用于所有现代浏览器(FF4 +，Chrome，Safari，IE8和IE9 +)
-05-16
