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

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的高度取决于其中最高元素的高度:文本区域.(参考)也许您想要弄清楚文本区域的高度(例如,可以使用Firebug,或IE或Chrome的开发人员工具),然后将标签设置为相同的高度.

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

原因height: 100%是你没想到的是父元素的高度为auto.这会导致您的标签也达到计算出的高度auto.

<percentage> 指定百分比高度.百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则该值将计算为"auto".

(参考)