寫了幾篇寬度自適應的佈局後，發現很多朋友都對高度自適應十分感興趣，於是整理了一篇貼了大家參考一下：
一般來說一個有好幾列的佈局，每列的內容都是不固定的，或多或少。所以在做佈局的時候一般不會給出每列的定高，但這樣做卻出現了列與列之間的高度不一致，導致陷入靈活有餘而精緻欠缺的尷尬。
所以設計師們急切的希望能找個一到簡單而有效的解決高度自適應的方法，這裏只列舉一種通過padding及margin解決的方案，希望能給大家一個參考。而通過JavaScript方式實現的，相信大家都會，這裏不舉例子。
［演示地址：http://www.doyoe.com/model/xhtmlcss/layout/4.htm］
CSS部分：
body {
margin: 0;
font-size: 12px;
font-family: Verdana, Arial;
text-align: center;
}
div {
overflow: hidden;
text-align: left;
}
h1,h3,p {
margin: 0;
}
#dyhead,#dyfoot {
width: 777px;
margin: auto;
background-color: #bbb;
}
#dymid {
width: 777px;
margin: auto;
background-color: #D2C6D2;
}
.dycenter {
width: 477px;
margin: 0 10px;
background-color: #eee;
}
.dyleft,.dyright {
width: 140px;
background-color: #E7DFD3;
}
.dyleft,.dycenter,.dyright {
padding-bottom: 32767px; /*使得各列都向下撐開32767像素*/
margin-bottom: -32767px; /*使得div的overflow發揮作用*/
float: left;
}
#dyfoot {
clear: both;
}
XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飄零霧雨|[email protected]" />
<title>DY CSS Layout 三行三列之高度自適應(noscript && 普通模式)</title>
</head>
<body>
<div id="dyhead">
<h1>Head</h1>
</div>
<div id="dymid">
<div class="dyleft">
<h3>Left</h3>
<p>leftpart<br />leftpart</p>
</div>
<div class="dycenter">
<h3>Center</h3>
<p>centerpart<br />centerpart<br />centerpart<br />centerpart</p>
</div>
<div class="dyright">
<h3>Right</h3>
<p>rightpart</p>
</div>
</div>
<div id="dyfoot">
<h1>Footer</h1>
</div>
</body>
</html>
這裏只有一個地方需要說明一下那就是.dyleft,.dycenter,.dyright三列都用了padding-bottom和margin-bottom。這裏首先將padding-bottom設置爲足夠長，作用是將三列向下撐開足夠長（一般的頁面都不會這麼長）；而margin-bottom設置爲負數則是爲了互補剛纔的padding-bottom設置，由於所有的div都被設置了overflow:hidden，所以left，center，right三列被padding撐開且無內容的部分則會被hidden，而顏色則因爲padding的原因保留着。這樣就達到了視覺上的高度自適應效果。