我想知道是否有一个纯粹的html + css方式来指定3行布局,其中中间div是贪婪的并占用两个固定行留下的所有剩余高度.在XAML中,这将是星号(*)字符.防爆. <row height="*"></row> 它告诉渲染引擎该行将消耗其父级提供的所有剩余高度.
我希望总高度占据所有屏幕高度(没有垂直滚动).
<body style="height:100%">
<header style="height: 64px"> </header>
<div style="height: *"> </div>
<footer style="height: 64px"> </footer>
</body>
调整浏览器屏幕大小时,中间内容应该波动,但页眉和页脚应保持相同的高度固定.
使用CSS中的绝对定位可以很容易地实现这一点.
* {
margin:0;
}
header {
position:absolute;
width:100%;
height:64px;
top:0;
}
footer {
position:absolute;
width:100%;
height:64px;
bottom:0;
}
div {
position:absolute;
width:100%;
top:64px;
bottom:64px;
}
请注意,在实际代码中,您将要使用内部div的类,否则您将为所有div元素设置样式.
这是一个更完整的小提琴示例:http://jsfiddle.net/BMxzn/