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

I tried to set height: 100%; in the label, but it didn't work. Why not?

我试着设定高度：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>

2 个解决方案

#1

You have height set to 100% but 100% of what? It's always the parent of that element so what is the parent's height set to? If it's not set to anything then the browser has nothing to reference.

你的身高设定为100％但是100％是什么？它始终是该元素的父元素，那么父元素的高度设置为什么？如果它没有设置为任何东西，则浏览器没有任何内容可供参考。

#2

In this case I believe your div's height is being determined by the height of the tallest element within it: the text-area. (Reference) Perhaps you want to figure out how many pixels tall your text-area is (for instance this can be done with Firebug, or IE or Chrome's developer tools), and then set your label to that same height.

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

I'd also explicitly set that height for the text-area to be sure it's the same in all browsers.

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

The reason height: 100% isn't working as you expect is that the parent element has a height of auto. This results in your label also getting a computed height of auto.

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

<percentage> Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

( Reference)

#1