3排縱向流動佈局，流體高度

我要實現垂直液盒模型3排縱向流動佈局，流體高度

|-------------| 
|    | 
|header 20% | 
|=============| 
|    | 
|    | 
|content 60% | 
|    | 
|-------------| 
|    | 
|footer 20% | 
|=============|

當我指定身體的高度爲100％它不工作。

如何在CSS中獲得垂直流體解決方案？

或者我需要使用JavaScript

JS：小提琴http://jsfiddle.net/EGesW/5/

來源

2011-11-24 codeAnand

html { 
    height:100%; 
} 
body{ 
    height:100%; 
} 
#header{ 
    background:#FF9933; 
    min-height:20%; 
} 
#content{ 
    background:#DDD; 
    min-height:60%; 
} 
#footer{ 
    background:#138808; 
    min-height:20%; 
}

來源

2011-11-24 17:58:54 MatthewK

非常感謝，我從哪裏得到這樣的文檔/信息？ – codeAnand

Personnaly幾年前我從這裏開始（http://w3schools.com/css/default.asp）。另外，我認爲在IE 6中不支持html 100％。 – MatthewK

移動設備中存在此問題。我經歷過，如果內容大於100％，但不能在iphone中滾動，但html和body的css高度爲100％。 – HerrSerker

的HTML標籤也被歸類爲在CSS的DOM大多數瀏覽器上的一部分。相反，運用你的身體風格的HTML太像這樣

html, body { height:100%; }

^^爲馬修說，打我也是它

來源

2011-11-24 18:00:17 Lee

非常感謝你，我在哪裏得到這樣的文件/信息？ – codeAnand

工程，我正在忙着嘗試答案張貼時，檢查這個小提琴我做：http://jsfiddle.net/EGesW/11/ – Niels

你必須html的高度設置爲100％，如果你想身體在100％（如果父元素的高度被設定爲100％的高度僅適用）：

body,html{ 
    height:100%; 
}

Here的一個例子。

來源

2011-11-24 18:00:51 Purag

噢好，我不知道這一個。 – HerrSerker

3排縱向流動佈局，流體高度

回答

相關問題