寬度和高度百分比將不會有影響，除非元素被佔用

我無法理解爲什麼當我使用百分比時，我沒有出現在我的屏幕上，但是當我使用像素時。寬度和高度百分比將不會有影響，除非元素被佔用

這是我的代碼：

<body> 
    <div class="container-content"></div> 
</body> 

body{ 
    width: 100%; 
    height: 100%; 
} 

.container-content{ 
    width: 50%; 
    height: 50%; 
    margin: 0 auto 0 auto; 
    background-color: green; 
}

如果我佔據了我的一些內容的div它不會有作用，我想。如果我將位置更改爲絕對或固定，它會產生我想要的影響（只是一個框）。如果我只是改變而不是百分比像素，它也會有我想要的影響（只是一個盒子）。

我在這裏錯了什麼？

感謝

來源

2014-09-06 lobengula3rd

在這些情況下，無論是html/body元素需要的100%的高度。這樣做，它應該工作。

Example Here

html, body { 
    height: 100%; 
}

它不工作的原因是因爲html元素具有0初始高度。由於所有子元素均使用基於百分比的值，因此0的100%也是0 - 因此沒有任何內容出現。

來源

2014-09-06 16:27:08

你說得對。但在某些情況下，只適用於身體，但不適用於HTML作品完美.... – 2014-09-06 16:28:24

@ C-linkNepal這是因爲在這種情況下'html'元素的高度爲'0'，因爲沒有其他子元素。在其他情況下，有一些子元素可以擴展'html'元素的高度，因此可以使基於百分比的高度值工作。 – 2014-09-06 16:29:37

你是什麼意思？ HTML總是有子元素... – 2014-09-06 16:36:59

寬度和高度百分比將不會有影響，除非元素被佔用

回答

相關問題