如何使用CSS做这个页眉/内容/页脚布局？ [英] How to make this Header/Content/Footer layout using CSS?
问题描述
______________________
| Header |
|______________________|
| |
| |
| Content |
| |
| |
|______________________|
| Footer |
|______________________|
我想创建一个UI，每个都是一个div。标题高度为30像素。页脚为30像素。但我不知道内容的高度。我需要使用用户框架来计算。
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.
总高度应为100％。
The total height should be 100%.
我可以在纯CSS中执行吗？
Can I do it in pure CSS?
推荐答案
，这很容易实现。
将包含您的3个分区的包装器设置为 display：flex; 高度 100％或 100vh 。包装器的高度将填充整个高度，并且 display：flex; 将导致该包装器的所有孩子具有适当的flex属性（例如<$ c
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.
示例标记：
<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
Here's that code live on Codepen: http://codepen.io/enjikaka/pen/zxdYjX/left
您可以在这里看到更多flexbox魔法： http://philipwalton.github.io / solve-by-flexbox /
You can see more flexbox-magic here: http://philipwalton.github.io/solved-by-flexbox/
或者在这里找到一个完善的文档： http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Or find a well made documentation here: 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 +）
That works on all modern browsers (FF4+, Chrome, Safari, IE8 and IE9+)
这篇关于如何使用CSS做这个页眉/内容/页脚布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
