何為高度自適應？
高度自適應就是高度能跟隨瀏覽器視窗的大小改變而改變，典型的運用在一些後台介面中上面一欄高度固定用作選單欄或導航欄，下面一欄高度自適應用於顯示內容。高度自適應不像寬度自適應那樣簡單，在相容瀏覽器方面也稍微複雜一些。
布局思路
在ie7+及chrome、firefox等瀏覽器中，高度自適應可以利用絕對定位來解決。但乙個元素是絕對定位時，如果沒有給它設定高度或寬度，則它的的高度和寬度是由它的top、right、bottom、left屬性決定的，但這一法則在ie6中並不適用，因此在ie6中還得另闢蹊徑。在ie6中給html設定padding,並不會撐大html元素的尺寸，這正是我們要利用的地方。
在ie7+ 和 w3c瀏覽器中的方案
看下**：
再看下效果：
在ie6中的方案
好吧，不想再對ie6吐槽，只想盡快搞定它。
在ie6中的思路是，把html和body元素的高度設定為100%，即瀏覽器視窗的高度，然後利用padding-top在html元素上擠出一點空間來，因為絕對定位的最高參照物是參照html元素的，所以可以把頂欄絕對定位在html的padding-top那塊空間上。這時body的高度就是html的高度（也是瀏覽器視窗的高度）減去html的padding-top的值，這也是ie6非常奇怪的乙個特性，因為按照w3c盒模型來講，增加了html元素的padding-top,則html元素的高度也會相應增加，這時瀏覽器視窗應該會出現垂直滾動條了。但ie6不會，html的增加了padding-top後，整個html元素的高度還是保持不變，即瀏覽器視窗的高度，變化的是body的高度減小了，用來抵消html的padding-top.
還是先看看**吧：
再看下效果：
最終的相容**1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<metacharset="utf-8" />
<title>高度自適應布局
<style>
html,body
body,div
* html/*for ie6*/
.top
* html .top/*for ie6*/
.main
* html .main/*for ie6*/
<body>
<divclass="top">我是top，固定高度
<divclass="main">我是main，高度隨瀏覽器大小變化而變化<pstyle="height:500px;">
效果圖：
非ie6
推廣
這種方法也適用於頂欄與底欄高度固定，中間那欄高度自適應的三欄布局
CSS布局奇淫技巧之 高度自適應
css布局奇淫技巧之 高度自適應 何為高度自適應？高度自適應就是高度能跟隨瀏覽器視窗的大小改變而改變，典型的運用在一些後台介面中上面一欄高度固定用作選單欄或導航欄，下面一欄高度自適應用於顯示內容。高度自適應不像寬度自適應那樣簡單，在相容瀏覽器方面也稍微複雜一些。布局思路 在ie7 及chrome f...
CSS布局奇淫技巧之 高度自適應
何為高度自適應？高度自適應就是高度能跟隨瀏覽器視窗的大小改變而改變，典型的運用在一些後台介面中上面一欄高度固定用作選單欄或導航欄，下面一欄高度自適應用於顯示內容。高度自適應不像寬度自適應那樣簡單，在相容瀏覽器方面也稍微複雜一些。布局思路 在ie7 及chrome firefox等瀏覽器中，高度自適應...
CSS布局奇淫技巧之 寬度自適應
css這個東西，說難不難，說容易也不容易。我覺得最重要的還是經驗的積累，正所謂的不積矽步，無以至千里。這一系列文章講述幾種css特殊布局的實現，也當作為自己做個備忘吧。首先講的是三列布局，左右兩列寬度固定，中間一列寬度自適應 這個很好實現，左右兩列分別左浮動和右浮動並給乙個固定寬度，中間不浮動，也不...