在 CSS 中如何使用百分比設置頁面 Div 高度？

01-04

一個登陸界面的文檔結構大致如下：
&
&&

&&
&&
&
其中login_header和login_footer無文字內容，只有一個背景顏色，顏色區別於login_content，login_content是登錄界面的主模塊，用戶填用戶名和密碼。

現在為了保證不同屏幕下顯示效果相同，div的高度使用百分比設置。body和login_wrapper的高度為100%，以保證本頁面充滿瀏覽器並且不會翻頁。同時設置login_header和login_footer的高度為20%，content為60%。但是如此設置，瀏覽器只能顯示content的內容，header和footer高度均為0px。無法達到本來的初衷。很奇怪，不知應該如何解決上述的問題。

1.div外層的父標籤如果沒有定義高度或寬度(用px或者其它單位定義，而非百分比)，div用百分比是無效的。如果堅持要用百分比，請換成table標籤。

2.如果一定要用div標籤，一種方法是通過JS腳本獲取瀏覽器高度或寬度然後給標籤，用純CSS方法，是這樣：給login_wrapper加一條屬性「position:absolute」。

html, body,.container {height: 100%; }

container的高度要設置成100%則前面一個元素要設置一個高度，所以我們追溯到html標籤，給html標籤定義高度為100%，這樣就可以了，chrome中實測。

body{height:100%;}

.login_wrapper{height:100%;}

.login_header,.login_footer{background-color:black;height:20%;}

.login_content{height:60%;}

首先，你要把body的高度定義為100%

在最根層html{width:100%;} 頁面中其他元素才能用百分比

body{padding: 0;margin: 0;height: 100%;}

.login_content{width: 1004px;height: 100%;background: #000000;}