2014-07-09 107 views
3

這是我的代碼。爲什麼身體的高度不符合html的高度?

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     html, body { min-height: 100%; } 
    </style> 
    </head> 
    <body> 
    </body> 
</html> 

瀏覽器,Firefox,Safari瀏覽器和視察員都顯示與高度等於在瀏覽器窗口的HTML元素作爲應的情況下,但是具有高度0設定高度(不只是最小高度)本體元件的身體元素到100%沒有幫助。 body元素的高度應該等於其父元素的100%,這個html元素的高度等於窗口的高度。那爲什麼不呢?

+0

關於最小高度的好問題不適用於身體元素。儘管增加'height:100%'實際上可以工作,請嘗試:http://jsfiddle.net/ND74j/。 – Justin

+0

[使身體有100%的瀏覽器高度]的可能的副本(http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height) –

回答

3

儘量限制其高度使用100%heightmin-height,像這樣總是隻能是:

html, body { 
    min-height: 100%; 
    height: 100%; 
} 

WORKING EXAMPLE

另一種可能的方式是給父(在這種情況下, html標籤)的高度爲100%,然後給孩子(body標籤)min-height,如下所示:

html { 
    height:100%; 
} 

body { 
    min-height: 100%; 
} 

WORKING EXAMPLE

這裏是一個類似的問題你可以回答一些更深入的問題 - Make body have 100% of the browser height

+0

任何想法爲什麼'min 「高度」本身不適用於身體元素?另外,如果你使用'height:100%',我不認爲你需要'min-height:100%'。 – Justin

+0

這似乎是一個Webkit的bug,除非他們故意這樣做。我會繼續尋找適當的答案來解決你的問題。雖然,從這個小提琴中可以看出,使用'div'完美的作品。所以這只是''body'和'html'標籤的問題 - http://jsfiddle.net/S3MxC/ – Fizzix

0

我認爲這是工作。新增的bgcolor你的身體元素,看看它是否是100% 。我試過下面這正碼 -

<!DOCTYPE html> 
<html> 
<head> 
<style> 
html, body { min-height: 100%;} 
</style> 
</head> 
<body bgcolor="#00CC33"> 
<div>HELLO</div> 
</body> 
</html> 
2

這不工作的原因是基於百分比height瓦萊斯要求的height來的父元素(除了html節點,它是基於關閉視口)上設置。雖然瀏覽器將始終將html節點渲染爲完整的瀏覽器,但實際上您需要將CSS中的height設置爲body,以使百分比基於。我相信你正在尋找的是以下內容。

html { 
    height: 100%; 
} 
body { 
    min-height: 100%; 
} 

JSFiddle

這是一個清潔的解決方案,以作爲體既bodyhtml和設置爲height: 100%;通常會是檢視區的大於100%。

0

制約height永遠是它的父元素將工作的高度,但你需要添加光CSS復位:

html, body{ 
    min-height:100%; 
    height:100%; 
    padding:0; 
    margin:0; 
} 

對於一個完整的CSS重置看到normalize.css

相關問題