Css 除非元素被占用，否则宽度和高度百分比不会产生影响_Css

Css 除非元素被占用，否则宽度和高度百分比不会产生影响

css

Css 除非元素被占用，否则宽度和高度百分比不会产生影响,css,Css,我很难理解为什么当我使用百分比时，我在屏幕上没有外观，但当我使用像素时，我有这是我的代码： <body> <div class="container-content"></div> </body> body{ width: 100%; height: 100%; } .container-content{ width: 50%; height: 50%; margin: 0 auto 0

我很难理解为什么当我使用百分比时，我在屏幕上没有外观，但当我使用像素时，我有

这是我的代码：

<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，它将不会产生我想要的效果。如果我将位置更改为绝对或固定，它将产生我只想要一个框的效果。如果我只是改变而不是百分比像素，它也会有影响，我只想要一个框

我这里出了什么错

谢谢

在这种情况下，html/body元素都需要100%的高度。在这样做的过程中，它应该起作用

它无法工作的原因是html元素的初始高度为0。由于所有子元素都使用基于百分比的值，因此0的100%也是0-因此没有显示任何内容。

在这种情况下，html/body元素都需要100%的高度。在这样做的过程中，它应该起作用

它无法工作的原因是html元素的初始高度为0。因为所有子元素都使用基于百分比的值，所以0的100%也是0-因此没有显示任何内容。

你说得对。但在某些情况下，仅应用于body而不应用于html是完美的……@C-linkNepal，这是因为在本例中，html元素的高度为0，因为没有其他子元素。在其他情况下，会有子元素扩展html元素的高度，从而使基于百分比的高度值起作用。您已经回答了我，但实际上它只适用于html，为什么？仍然有效。你的意思是，如果OP在.container内容中没有基于百分比的值，但在该容器的子容器中有基于百分比的值，那么如果它只应用于body，则该OP可以工作吗？你是对的。但在某些情况下，仅应用于body而不应用于html是完美的……@C-linkNepal，这是因为在本例中，html元素的高度为0，因为没有其他子元素。在其他情况下，会有子元素扩展html元素的高度，从而使基于百分比的高度值起作用。您已经回答了我，但实际上它只适用于html，为什么？仍然有效。您的意思是，如果OP在.container内容中没有基于百分比的值，但在该容器的子容器中有基于百分比的值，那么如果它仅应用于主体，该OP是否可以工作？

html, body {
    height: 100%;
}