爲什麼純粹的百分比包裝不起作用？

我很難理解爲什麼百分比的使用在這種情況下不起作用：有人可以啓發我嗎？爲什麼純粹的百分比包裝不起作用？

#wrapper{ 
    position:relative; 
    width:90%; 
    height:90%; 
    background-color: black; 
}

HTML：

<body> 
     <div id="wrapper"> 

     </div> 
    </body>

2012-07-03 Jurudocs

你確定你也把這個CSS代碼？

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

2012-07-03 17:42:53

一點也不......這就是它......但爲什麼？ – Jurudocs

默認情況下，html和body元素沒有定義的寬度; 'undefined'的90％不會讓你到達任何地方。通過設置'html'和'body'具有'100％'寬度，你的包裝上的寬度設置現在可以工作 – jackwanders

@jackwanders - 你已經把寬度與高度混淆了。您不需要在寬度的父元素中使用基本寬度作爲在子元素內工作的百分比。但是，您需要將基礎高度設置爲能夠在直接孩子中使用高度作爲百分比 –

寬度將佔用父容器的百分比。如果您沒有設置寬度body元素上，那麼寬度爲0來解決問題：

body {width:100%;} 
#wrapper {width:90%}

這導致一個div 90％屏幕的總寬度。

2012-07-03 17:43:47 smilebomb

回答