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>
With no height value provided for the HTML element, setting the height and/or min-height of the body element to 100% results in no height (before you add content).
Height % is based on it's parent (so you have to set every element above the target element to 100%) , there are a few workarounds to this though. For instance you can set it to height: 100vh; This will create the element to be 100% of your window height. Or you can use px instead.
container div has two parent elements: the <body> and the <html> element. And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.
You can modify this by overwriting the default CSS rule: just tell the browser that you want your label to be rendered like a block element. You need to do that because elements that are in-line (display:inline) can't have properties like height , line-height , margin-top , margin-bottom (they will be ignored).
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.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With