如何使用CSS制作此页眉/内容/页脚布局？
______________________
| Header |
|______________________|
| |
| |
| Content |
| |
| |
|______________________|
| Footer |
|______________________|
我想制作这个UI，并且每个都是div。标题高度是30px。页脚是30px。但我不知道内容的高度。我需要使用用户框架来计算。如何使用CSS制作此页眉/内容/页脚布局？
总高度应为100％。
我可以在纯CSS中做到吗？
使用Flexbox的，这是很容易实现的。
将包含3个隔层的包装纸设置为display: flex;，并将其设置为100%或100vh的高度。包装的高度将填满整个高度，并且display: flex;将使该包装具有适当的柔性属性（例如flex:1;）的所有孩子都能用柔性魔术控制。
示例标记：
<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;
}
下面是代码住在Codepen：http://codepen.io/enjikaka/pen/zxdYjX/left
你可以看到更多的Flexbox的魔法在这里：http://philipwalton.github.io/solved-by-flexbox/
或找到一个制作精良的文档回复：http://css-tricks.com/snippets/css/a-guide-to-flexbox/
- [老回答下面] -
在这里你去：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>
这在所有现代浏览器（FF4 +，Chrome浏览器，Safari浏览器，IE8和IE9的作品+ ）
以下是如何操作：
页眉和页脚高度为30px。
页脚粘在页面的底部。
HTML：
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
CSS：
#header {
height: 30px;
}
#footer {
height: 30px;
position: absolute;
bottom: 0;
}
body {
height: 100%;
margin-bottom: 30px;
}
试试它的jsfiddle：http://jsfiddle.net/Usbuw/
试试这个
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
<body>
<div class="Header">Header</div>
<div class="Content">Content</div>
<div class="Footer">Footer</div>
</body>
不起作用。以这种方式，“内容”永远不会有100％的高度。 –
看看回答的日期。浏览器自2011年以来已经发生了变化。 – atrueresistance
是的，这不是你的错，但是最好对那些使用代码的人提出警告，像我一样。 :) –
周围一阵摆弄后，我发现，工作在> 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：
<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>
试试这个
<!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>
可以downvoters解释他们的downvotes？我不知道CSS，所以这对我来说看起来像一个完美的问题。 –
我敢肯定downvotes是由于缺乏OP的认知努力，这是完全合法的。 –
这是一个完全有效的问题。这仍然是一个痛苦，而且对CSS不直观。 – Glenn