为什么我的标签元素在设置 `height: 100%;` 时没有填充整个高度？

百分比设置的标签高度问题

尽管将高度设置为 100%，标签元素仍然不受影响。这是因为高度：100%；依赖于参考点，通常是父元素的高度。

在提供的代码片段中，.field 标签的高度：100%；属性，但父元素 .field 未指定高度值。因此，浏览器缺乏计算 100% 的定义高度。

要解决此问题，请为 .field 父元素建立一个高度值。例如，您可以使用 height: 200px; 指定固定高度。或基于包含元素的百分比高度，使用 height: 50vh； （其中 vh 代表视口高度）。

修改代码：

<code class="css">.field {
    display: block;
    margin-bottom: 9px;
    background: none;
    border: none;
    height: 200px; /* Fixed height for reference */
}

.field label {
    color: #3E3E3E;
    font-weight: bold;
    width: 80px;
    display: block;
    float: left;
    margin-top: 5px;
    margin-left: 3px;
    height: 100%; /* Now it has a reference, 200px */
}</code>

通过为父元素提供高度上下文，标签的 100% 高度设置将采用效果，导致 .field 容器内完全展开标签。

以上是为什么我的标签元素在设置 `height: 100%;` 时没有填充整个高度？的详细内容。更多信息请关注PHP中文网其他相关文章！