使用flex@R_324_2419@，这很容易实现。
将包含3个隔层的包装器display: flex;的高度设置为100%或100vh。包装器的高度将填满整个高度，这display: flex;将使该包装器的所有子级具有适当的flex-properties（例如flex:1;），由flex@R_324_2419@-magic控制。
标记示例：
<div class="wrapper">
<header>I'm a 30px tall header</header>
<main>I'm the main-content filling the void!</main>
<footer>I'm a 30px tall footer</footer>
</div>
和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;
}
<!DOCTYPE html>
<html>
<head>
<Meta charset=utf-8 />
<title>Layout</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
header {
height: 30px;
background: green;
}
footer {
height: 30px;
background: red;
}
</style>
</head>
<body>
<header>
<h1>I am a header</h1>
</header>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.
</p>
</article>
<footer>
<h4>I am a footer</h4>
</footer>
</body>
</html>
适用于所有现代浏览器（FF4 +，Chrome，Safari，IE8和IE9 +）
602392714
清零编程群