[英]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;
}
請注意，在實際代碼中，您將需要為內部div使用一個類，否則將為所有div元素設置樣式。
這是一個更完整的小提琴示例： http : //jsfiddle.net/BMxzn/
嘗試這個
的CSS
html, body{
height:100%;
}
header{
height:64px;
background-color:#0C9;
}
footer{
height:64px;
background-color:#666;
}
.bodyPan{
height: calc(100% - 128px);
}
html
<header> </header>
<div class="bodyPan"> </div>
<footer> </footer>
您也可以使用box-sizing:border-box來做到這一點。
div
{
height: 100%;
background: pink;
margin-top: -64px;
padding-top: 64px;
margin-bottom: -64px;
padding-bottom: 64px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
順便說一句，它比calc具有更好的瀏覽器支持。 （IE8 +和所有現代瀏覽器）
[也請注意，對於Firefox，您需要在框大小調整屬性前加上-moz-前綴]
Danield解決方案是最好的跨瀏覽器解決方案，但請記住添加到：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
使用動態高度（流體布局）在div的各表行之間對齊-CSS
[英]Alignment across table rows of divs with dynamic height (fluid layout) - CSS
DIV中的兩行，其中一行具有固定高度，另一行具有流體高度
[英]Two rows in a DIV, one with fixed height and another with fluid height
HTML+CSS 中的動態 3 列布局：側列相等且最大，中間列最小並推動布局？
[英]Dynamic 3 Column Layout in HTML+CSS: Side Columns Equal & Maximal, Middle Column Minimal & Driving the Layout?
3行布局，頁眉和頁腳固定高度和流體內容但滾動
[英]3 row layout, header and footer fixed height and fluid content but scrolling
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.