______________________
| Header |
|______________________|
| |
| |
| Content |
| |
| |
|______________________|
| Footer |
|______________________|
我想制作这个UI,每个都是div.标题高度为30px.页脚是30px.但我不知道内容的高度.我需要使用用户框来计算.
总高度应为100%.
我可以用纯CSS做到吗？
Jer*_*son 34
使用flexbox,这很容易实现.
将包含3个隔间的包装设置为,display: flex;并使其高度为100%或100vh.包装器的高度将填充整个高度,并且display: flex;将导致具有适当的flex-properties(例如flex:1;)的此包装器的所有子项都使用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
你可以在这里看到更多的flexbox-magic: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/