Question

我正在尝试编辑Wordpress主题的CSS。

我有一个元素的高度，我可以在Element Inspector中成功更改，如果我指定某个像素高度，例如：

height=100px;

但是当我尝试通过指定百分比来改变高度时，例如：

height=50%;

元素不会改变高度。关于我做错了什么，或者如何解决问题的任何想法？

所有父元素都没有任何高度属性。

Answer 1

简答

以百分比（％）定义的长度值根据包含框的值获取值。将父框的高度设置为任何绝对值（如高度：500px）。

长答案

长度属性（高度，宽度）的默认值具有默认值auto，我们应该知道这些值的工作原理（在块显示中）：

auto：Width的设置方式是块的整体宽度（包括边框，填充，边距）占据父块的宽度。
但是，Height始终根据计算的子元素高度（包括边框，填充，边距）进行设置。
`percentage（％）：长度属性根据包含框的值获取值。

body和div等元素填充可用宽度，同时只有可用内容所需的高度。

<强>之前

<body>
<div style="height: 100%"> <!-- This have same affect as "height: auto" -->
Hello World!
</div>
</body>

<强>后

<body>
<div style="height: 500px;">
<div style="height: 100%;"> <!-- sets the height of div equal to 500px -->
Hello World!
</div>
</div>
</body>

Answer 2

您无法更改height％的原因是您需要在父元素上设置100% height，在这种情况下为body。

现在，它不一定必须是body，它可以是任何父元素，但我在我的body中使用了html, body { height: 100%; } div { height: 100%; background: #F52887; }将这个想法贯穿其中的例子。例如，看看下面。

{{1}}