Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting height: 100% on my label element doesn't work

Tags:

css

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>
like image 787
Lucas Pelegrino Avatar asked Jan 25 '11 03:01

Lucas Pelegrino


People also ask

How do I make my HTML height 100%?

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).

Why is not working on height in CSS?

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.

How do you set height to 100% of a parent?

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.

How do I increase the height of a label in HTML?

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).


2 Answers

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.

like image 120
Rob Avatar answered Sep 21 '22 12:09

Rob


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)
like image 25
Tim Goodman Avatar answered Sep 21 '22 12:09

Tim Goodman