Question

我尝试在标签中设置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>

Answer 1

你的身高设定为100％但是100％是什么？它始终是该元素的父元素，那么父元素的高度设置为什么？如果没有设置为任何内容，则浏览器无需引用。

Answer 2

在这种情况下，我相信你的div的高度取决于其中最高元素的高度：文本区域。（Reference）也许您想知道文本区域的高度（例如，可以使用Firebug或IE或Chrome的开发人员工具完成），然后将标签设置为相同的高度。

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

height: 100%无法正常工作的原因是父元素的高度为auto。这会导致您的标签的计算高度也为auto。

＆LT;百分比＆GT; 的指定百分比高度。百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则该值计算为“auto”。

（Reference）

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

2 个答案: