HTML + CSS布局，有3行，中排液体夹在固定高度的行之间 [英] HTML+CSS Layout with 3 rows, middle row fluid sandwiched by fixed height rows
问题描述
我想知道是否有一个纯粹的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;
}
注意，在实际代码中，
这里有一个更完整的小提琴示例： http://jsfiddle.net/BMxzn/
I am wondering if there is a pure html+css way to specify a 3 row layout where the middle div is greedy and takes up all the remaining height that the two fixed rows leave behind. In XAML this would be the asterisk (*) character. Ex. <row height="*"></row> which tells the rendering engine that this row will consume all remaining height offered by its parent.
I want the total height to take up all screen height (with no vertical scrolling).
<body style="height:100%">
<header style="height: 64px"> </header>
<div style="height: *"> </div>
<footer style="height: 64px"> </footer>
</body>
When the browser screen is resized, the middle content should fluctuate but the header and footer should remain same height fixed.
This can be achiever quite easily with absolute positioning in 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;
}
Note, that in real code you'll want to use a class for the inner div otherwise you'll be styling all the div elements.
Here's a more complete fiddle example: http://jsfiddle.net/BMxzn/
这篇关于HTML + CSS布局，有3行，中排液体夹在固定高度的行之间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
