使用flexbox，这很容易实现。
将包含3个隔层的包装器
display: flex;的高度设置为
100%或
100vh。包装器的高度将填满整个高度，这
display:flex;将使该包装器的所有子级具有适当的flex-properties（例如
flex:1;），由flexbox-magic控制。
标记示例：
<div > <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; 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.googlepre.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 +）
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）