關於多子級元素充滿父級元素高度的布局方式，聽着有些繞口，上個圖應該就能很清楚的理解這標題的意思了；
如圖：左右分欄的情況下，有頂部和底部導航，且在屏幕高度不定的時候（移動端，多設備適配），如何不適用js來讓內容區自適應擴展，填滿父級剩下的高度呢？
首先分兩種情況：
一、頂部和底部導航為固定高度時，這種情況挺常見的，也是相對比較簡單的一種情況；
方法1：使用box-sizing: border-box; 配合 height: 100%; 和上下padding來達到全屏側邊的效果；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body {height: 100%;}
.box {
height: 100%;
}
.left {
position: relative;
float: left;
width: 200px;
height: 100%;
padding: 50px 0;
box-sizing: border-box;
background: #39f;
}
.top {
height: 50px;
background: yellow;
}
.bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: green;
}
.right {
height: 100%;
padding-left: 200px;
background: #e5e5e5;
}
</style>
</head>
<body>
<div class="box">
<div class="top"></div>
<div class="left"></div>
<div class="bottom"></div>
<div class="right"></div>
</div>
</body>
</html>
效果預覽圖：box-sizing方式效果查看；
方法二：使用定位的top、bottom來自適應內容高度
同時設置top值和bottom值時，定位元素會自動充滿相對定位元素高度-top-bottom后剩下的內容高度；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body {height: 100%;}
.box {
height: 100%;
}
.left {
position: relative;
float: left;
width: 200px;
height: 100%;
}
.top {
height: 50px;
background: yellow;
}
.content {
position: absolute;
top: 50px;
bottom: 50px;
width: 100%;
background: #39f;
}
.bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: green;
}
.right {
height: 100%;
padding-left: 200px;
background: #e5e5e5;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<div class="top"></div>
<div class="content"></div>
<div class="bottom"></div>
</div>
<div class="right"></div>
</div>
</body>
</html>
效果預覽： 定位設置top、bottom自適應內容高度效果；
情況一應該還有其他更好的方法，等發現后再來添加，如果各位有什么好方法請在評論中告訴我，謝謝；
情況二：同樣布局，但是頂部和底部的導航高度不固定；
例如下圖：
頂部使用的廣告圖片設置width100%，使其高度自己擴展，所以在不同屏幕中，圖片高度不同，無法使用情況一的兩種方法，
具體的使用方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- <meta name="veiwport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabel=0"> --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <style> html, body {height: 100%;margin: 0;} .box { width: 100%; height: 100%; } .content:after { content: '\200B'; clear: both; display: block; height: 0; } .left { overflow: hidden; float: left; width: 25%; padding-bottom: 99999px; margin-bottom: -99999px; background: #39f; } .bottom { position: fixed; bottom: 0; width: 100%; height: 50px; background: green; } .right { padding-left: 25%; background: #e5e5e5; } </style> </head> <body> <div class="box"> <img src="57792b4ee20e3.jpg" width="100%" alt=""> <div class="content"> <div class="left"></div> <div class="right"> <br> </div> </div> <div style="height: 50px;background: red; clear: both;"></div> <div class="bottom"></div> </div> </body> </html> </body> </html>
效果預覽： 查看 由於樣式按移動端寫的，請使用控制台移動端調試頁面查看；
中部紅色元素是為了防止左右側內容過長被底部固定定位的footer遮住，請添加right元素內容，就可以看到效果，實際使用的時候，去掉背景色就不會有影響了。
暫時就想到這些，應該還有更好的辦法來實現這么布局。
2017.04.24修改：最近看了flexbox的屬性，發現可以很完美的解決這種問題，就是兼容性慘不忍睹 IE10+；
具體代碼：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>H5course</title> </head> <body> <style> .HolyGrail { display: flex; min-height: 100vh; flex-direction: column; /*最外層垂直排列*/ } header, footer { height: 50px; background: orange; } .HolyGrail-body { /*內容區默認平行排列*/ display: flex; flex: 1; /*縮寫 flex-basis:0%;flex-grow:1;flex-shrink:1;*/ } .HolyGrail-content { flex: 1; background: skyblue; } .HolyGrail-nav, .HolyGrail-ads { /* 兩個邊欄的寬度設為12em */ flex: 0 0 12em; background: yellow; } .HolyGrail-nav { /* 導航放到最左邊 */ order: -1; } </style> <div class="HolyGrail"> <header>...</header> <div class="HolyGrail-body"> <main class="HolyGrail-content">...</main> <nav class="HolyGrail-nav">...</nav> <aside class="HolyGrail-ads">...</aside> </div> <footer>...</footer> </div> </body> </html>
效果預覽：flex；
display：flex；確實很強大，就是對於位置和大小的控制有點復雜，還需要多練習。