为什么纯粹的百分比包装不起作用？

问题描述：

我很难理解为什么百分比的使用在这种情况下不起作用：有人可以启发我吗？为什么纯粹的百分比包装不起作用？

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

HTML：

<body> 
     <div id="wrapper"> 

     </div> 
    </body>

答

你确定你也把这个CSS代码？

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

一点也不......这就是它......但为什么？ – Jurudocs

默认情况下，html和body元素没有定义的宽度; 'undefined'的90％不会让你到达任何地方。通过设置'html'和'body'具有'100％'宽度，你的包装上的宽度设置现在可以工作 – jackwanders

@jackwanders - 你已经把宽度与高度混淆了。您不需要在宽度的父元素中使用基本宽度作为在子元素内工作的百分比。但是，您需要将基础高度设置为能够在直接孩子中使用高度作为百分比 –

答

宽度将占用父容器的百分比。如果您没有设置宽度body元素上，那么宽度为0来解决问题：

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

这导致一个div 90％屏幕的总宽度。