如何使用 CSS 制作此页眉/内容/页脚布局？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7123138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make this Header/Content/Footer layout using CSS?
提问by DNB5brims
______________________
| Header |
|______________________|
| |
| |
| Content |
| |
| |
|______________________|
| Footer |
|______________________|
I would like to make this UI, and each is a div. The header height is 30px. And the footer is 30px. But I don't know the content height. I need to use the user frame to calculate.
我想做这个UI，每个都是一个div。标题高度为 30px。而页脚是 30px。但我不知道内容高度。我需要使用用户框架来计算。
The total height should be 100%.
总高度应为 100%。
Can I do it in pure CSS?
我可以用纯 CSS 来做吗？
采纳答案by Jeremy Karlsson
Using flexbox, this is easy to achieve.
使用 flexbox，这很容易实现。
Set the wrapper containing your 3 compartments to display: flex;and give it a height of 100%or 100vh. The height of the wrapper will fill the entire height, and the display: flex;will cause all children of this wrapper which has the appropriate flex-properties (for example flex:1;) to be controlled with the flexbox-magic.
将包含 3 个隔间的包装纸设置display: flex;为100%或高度100vh。包装器的高度将填满整个高度，这display: flex;将导致此包装器的所有子级具有适当的 flex-properties（例如flex:1;）由 flexbox-magic 控制。
Example markup:
示例标记：
<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>
And CSS to accompany it:
和 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;
}
Here's that code live on Codepen: http://codepen.io/enjikaka/pen/zxdYjX/left
这是 Codepen 上的代码：http://codepen.io/enjikaka/pen/zxdYjX/left
You can see more flexbox-magic here: http://philipwalton.github.io/solved-by-flexbox/
你可以在这里看到更多的 flexbox-magic：http://philipwalton.github.io/solved-by-flexbox/
Or find a well made documentation here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
或者在这里找到一个制作精良的文档：http: //css-tricks.com/snippets/css/a-guide-to-flexbox/
--[Old answer below]--
--[下面的旧答案]--
Here you go: http://jsfiddle.net/pKvxN/
给你：http: //jsfiddle.net/pKvxN/
<!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>
That works on all modern browsers (FF4+, Chrome, Safari, IE8 and IE9+)
适用于所有现代浏览器（FF4+、Chrome、Safari、IE8 和 IE9+）
回答by Arnaud Le Blanc
Here is how to to that:
这是如何做到的：
The header and footer are 30px height.
页眉和页脚的高度为 30 像素。
The footer is stuck to the bottom of the page.
页脚粘在页面底部。
HTML:
HTML：
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
CSS:
CSS：
#header {
height: 30px;
}
#footer {
height: 30px;
position: absolute;
bottom: 0;
}
body {
height: 100%;
margin-bottom: 30px;
}
Try it on jsfiddle: http://jsfiddle.net/Usbuw/
在 jsfiddle 上试试：http: //jsfiddle.net/Usbuw/
回答by acme
After fiddling around a while I found a solution that works in >IE7, Chrome, Firefox:
经过一段时间的摆弄，我找到了一个适用于 >IE7、Chrome、Firefox 的解决方案：
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#wrap {
min-height:100%;
}
#header {
background: red;
}
#content {
padding-bottom: 50px;
}
#footer {
height:50px;
margin-top:-50px;
background: green;
}
HTML:
HTML：
<div id="wrap">
<div id="header">header</div>
<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. </div>
</div>
<div id="footer">footer</div>
回答by Anand
Try This
尝试这个
<!DOCTYPE html>
<html>
<head>
<title>Sticky Header and Footer</title>
<style type="text/css">
/* Reset body padding and margins */
body {
margin:0;
padding:0;
}
/* Make Header Sticky */
#header_container {
background:#eee;
border:1px solid #666;
height:60px;
left:0;
position:fixed;
width:100%;
top:0;
}
#header {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin:0 auto;
overflow:auto;
padding:80px 0;
width:940px;
}
#content {
}
/* Make Footer Sticky */
#footer_container {
background:#eee;
border:1px solid #666;
bottom:0;
height:60px;
left:0;
position:fixed;
width:100%;
}
#footer {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
</style>
</head>
<body>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
content
<br /><br />
blah blah blah..
...
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>
回答by atrueresistance
Try this
尝试这个
CSS
CSS
.header{
height:30px;
}
.Content{
height: 100%;
overflow: auto;
padding-top: 10px;
padding-bottom: 40px;
}
.Footer{
position: relative;
margin-top: -30px; /* negative value of footer height */
height: 30px;
clear:both;
}
HTML
HTML
<body>
<div class="Header">Header</div>
<div class="Content">Content</div>
<div class="Footer">Footer</div>
</body>
