21

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

.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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Lucas Pelegrino
  • 271
  • 1
  • 3
  • 5

2 Answers2

40

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.

Rob
  • 14,746
  • 28
  • 47
  • 65
  • 2
    So there's no way for label to stay with the same height than his parent when the parent's height is auto? I tried "inherit"... but still the same. – Lucas Pelegrino Jan 25 '11 at 04:24
  • Do you expect the height of the parent to change? Even if it's "auto" the computed height will be some number of pixels, and as long as this value is constant it should be fine to just set the Label to that same height. – Tim Goodman Jan 25 '11 at 04:28
  • "Computed" isn't really the technical term I want there... "resolved" maybe? I'd have to check the CSS documentation. – Tim Goodman Jan 25 '11 at 04:29
  • Ah, "used value" was what I meant: http://www.w3.org/TR/CSS21/cascade.html#used-value – Tim Goodman Jan 25 '11 at 04:37
  • 7
    100% of PARENT thats what – Muhammad Umer Dec 01 '14 at 19:46
  • Sometimes, it helped me to specify that the parent was also set to `height: 100%`, even if, without it, it would already have had the same height (think flex rules, etc.) – Jean-Philippe Pellet Jun 10 '15 at 15:03
  • This is a CSS defect 100%, there's no reason for it not to know what the height is. DOM is a tree. Any element has a parent. That parent has a height. That's the value you want. You can't tell me that it's impossible to know the height of a parent, because clearly at some point, the browser has evaluated it. – Sava B. Oct 16 '17 at 22:04
  • @SavaB. The DOM has nothing to do with it. It's the CSSOM, the CSS Object Model, that handles this. I never said it's impossible to know the height either but the CSS specification is clear that you must set the height if you want that value. Read the specification if you want more information. – Rob Oct 16 '17 at 22:29
14

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.

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.

<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)
Tim Goodman
  • 23,308
  • 7
  • 64
  • 83
  • The "[containing block](https://www.w3.org/TR/CSS21/visudet.html#containing-block-details)" is not necessarily the parent element. – cambunctious Feb 22 '18 at 21:27