在我的标签元素上设置高度：100% 不起作用答案

【问题标题】：Setting height: 100% on my label element doesn't work在我的标签元素上设置高度：100% 不起作用
【发布时间】：2015-06-03 23:27:17
【问题描述】：

我尝试在标签中设置height: 100%;，但没有成功。为什么不呢？

.field label {
    color:#3E3E3E;
    font-weight:bold;
    width:80px;
    display:block;
    float:left;
    margin-top:5px;
    margin-left:3px;
    height:100%; /* <-- doesn't work */
}
.field {
    display:block;
    margin-bottom:9px;
    background:none;
    border:none;
}

<div class="field large">
    <label>Textarea</label>
    <textarea></textarea>
</div>

【问题讨论】：

标签： css

【解决方案1】：

您将高度设置为 100%，但 100% 是什么？它始终是该元素的父元素，那么父元素的高度设置为多少？如果它没有被设置为任何东西，那么浏览器就没有可参考的东西。

【讨论】：

所以当父母的高度是自动时，标签没有办法保持与父母相同的高度吗？我试过“继承”……但还是一样。
你期望父母的身高会改变吗？即使它是“自动”的，计算的高度也会是一些像素，只要这个值是恒定的，只需将标签设置为相同的高度就可以了。
“计算”并不是我真正想要的技术术语......“解决”也许？我必须检查 CSS 文档。
啊，“使用价值”就是我的意思：w3.org/TR/CSS21/cascade.html#used-value
100% 的家长就是这样

【解决方案2】：

在这种情况下，我相信您的 div 的高度是由其中最高元素的高度决定的：文本区域。 (Reference) 也许你想知道你的文本区域有多少像素高（例如这可以用 Firebug、IE 或 Chrome 的开发者工具来完成），然后将你的标签设置为相同的高度。

我还明确设置了文本区域的高度，以确保它在所有浏览器中都相同。

height: 100% 未按预期工作的原因是父元素的高度为auto。这会导致您的标签也得到auto 的计算高度。

指定百分比高度。该百分比是相对于生成框的包含块的高度计算的。如果没有明确指定包含块的高度（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为 'auto'。

(Reference)

【讨论】：

“containing block”不一定是父元素。