html,body {
height: 100%;
padding: 0;
margin: 0;
/* height:100vh 或者這樣*/
}
vh的意思是把瀏覽器視口橫向分爲100份，100vh就是100%高度。
如果上方有個導航條，可以減去導航條高度,如：
height:calc(100vh - 60px)
height:calc(100% - 20px);
如果瀏覽器版本低,使用jQuery
function setSizes() {
var containerHeight = $("#listContainer").height();
$("#myList").height(containerHeight - 18);
}
我recalc綁定到它的窗口大小，瀏覽器，無論是工具窗口(如果容器的大小和窗口大小的變化)
$(window).resize(function() { setSizes(); });
古老瀏覽器的寫法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自適應佈局</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
color: #F00;
}
.top {
background: #36C;
height: 100px;
}
.main {
background: #F90;
position: absolute;
width: 100%;
top: 100px;
bottom: 0;
overflow: auto;
}
/*for ie6*/
* html {
padding-top: 100px;
}
* html .top {
background: #36C;
height: 100px;
position: absolute;
top: 0;
width: 100%;
}
* html .main {
background: #F90;
position: static;
height: 100%;
}
</style>
</head>
<body>
<div class="top">我是top，固定高度</div>
<div class="main">我是main，高度隨瀏覽器大小變化而變化<p style="height:500px;"></p>
</div>
</body>
</html>