Why does 100% not mean 100% height?

Question

I am trying to get some divss to expand to fill the screen, but I am struggling. I have broken down the issue on this jsfiddle.

What I really want to know is why does the div, with its 100% min-height, not expand to that height (or at all) when its parent has the same attribute and does expand?

<body>
    <div>
        stuff
    </div>
</body>

body {
    min-height: 100%;
    background: red;
}
div {
    min-height: 100%;
    background: grey;
}

because you can't really use 100% height on a static element. Changing the position attribute from static to absolute will give you 100% height. http://jsfiddle.net/qggFz/ — Joseph Marikle, Oct 24 '11 at 18:57
this is the right answer, you should submit answers as answers, so we can choose them as such. :D — Mild Fuzz, Oct 24 '11 at 19:29
Nothing related to height in HTML and CSS means what you think it means. — Mike, Dec 26 '21 at 04:00

score 19 · Accepted Answer · answered Oct 24 '11 at 20:55

The issue is covered in the CSS 2.1 spec:

<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'. A percentage height on the root element is relative to the initial containing block. Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element. This is a change from CSS1, where the percentage was always calculated with respect to the content box of the parent element.

So, to clarify, a percentage height will reference the height of its containing block (unless it is position: absolute or position: fixed). If that containing block does not have a specified height, then the percentage will refer to auto, and it won't really do much.

position: absolute changes the referenced containing block to the nearest positioned (absolute, relative, or fixed) element.

position: fixed changes the referenced containing block to the viewport.

So, if you specify a height on your containing block, specify a position other than static on your containing block, or don't mind using the viewport as your containing block, then you can use percentage heights effectively.

Please see my demonstration at jsFiddle

"If that containing block does not have a specified height..." - do you mean it has to be explicitly specified? What if a block has height thanks to its child elements, but has no explicit height. — elena, Jun 10 '18 at 07:08

score 11 · Answer 2 · answered Oct 24 '11 at 18:57

11

You need to also set the height of the html so that 100% refers to the viewport height instead of the document height (demo):

html,body {
    height: 100%;
    background: red;
    padding: 0;
}
div {
    height: 100%;
    background: grey;
}

answered Oct 24 '11 at 18:57

phihag

278,196
72
453
469

I can see it worked in jsfiddle, but didn't when implemented with the rest of my site. Hmmmm.... – Mild Fuzz Oct 24 '11 at 20:03
@MildFuzz Can you post a link to your website? – phihag Oct 24 '11 at 20:04
It's not live currently (and for good reason!). Also, I have fixed it using absolute positioning, which is fine for my requirements (in fact, now I think about it, essential!!) – Mild Fuzz Oct 24 '11 at 20:06
@MildFuzz Well, I'm afraid I can't really help you then. Have you tried simplifying the code as much as possible, and checked that the CSS properties are what you expect (with the developer tools of your browser)? – phihag Oct 24 '11 at 20:10
Like I said, it's working now, so I am not going to go into it any further. I have given you an upvote for your efforts, but I want to give the commenter who led me down the right path the chance to create a question so I can tick it. Thanks :D – Mild Fuzz Oct 24 '11 at 20:12
I personally think this answer should be marked as the accepted answer. My answer, though helpful to the OP, is not backed by hard facts or links to resources. I don't fully understand why static elements have a hard time with 100% height. – Joseph Marikle Oct 24 '11 at 20:18
@Joseph I don't exactly have much to back my answer up either. I can't find any mention of why either of our solutions would work in the HTML and CSS standards. In general, [`height`](http://www.w3.org/TR/CSS21/visudet.html#the-height-property) should only be ignored on inline elements. – phihag Oct 24 '11 at 20:23
@phihag Was talking to the guys in http://chat.stackoverflow.com/rooms/17/javascript and someone suggested that it was because 100% is inherited. thus, it can't get 100% from an undefined height. So you either have to set the height of html or you have to take the element out of flow with positioning. – Joseph Marikle Oct 24 '11 at 20:54
Please note that `html { height: 100%; }` will set the height of the document to the height of the *viewport*, as that is the document's containing block. It will *not* grow with the content of the page, though the `overflow` setting might make it seem that way. – Ryan Kinal Oct 25 '11 at 13:06

score 6 · Answer 3 · answered Oct 24 '11 at 20:16

6

because you can't really use 100% height on a static element. Changing the position attribute from static to absolute will give you 100% height. demo

_{_{posted as answer per the request of the the PO.}}

answered Oct 24 '11 at 20:16

Joseph Marikle

76,418
17
112
129

score 0 · Answer 4 · answered Apr 06 '18 at 06:37

0

This will work

   body, html {
      height: 100vh;
    }

    aside {
      background: green;
      width: 200px;
      height: 100vh;
    }

answered Apr 06 '18 at 06:37

Rejneesh

1,574
16
16

score 0 · Answer 5 · edited May 23 '17 at 10:30

0

Percentage heights in CSS don't make a lot of sense to me. I would argue that it doesn't work the way it should, but CSS enthusiasts would insist that it does.

This article discusses both the issue and solution in detail:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

This might help too:

<style> 
    #outer {position:absolute; height:auto; width:200px; border: 1px solid red; } 
    #inner {position:absolute; height:100%; width:20px; border:1px solid black; } 
</style> 

<div id="outer"> 
    <div id="inner"></div> 
    text 
</div>

See here for more details on the above:
How to make a floated div 100% height of its parent?

edited May 23 '17 at 10:30

Community

1
1

answered Oct 24 '11 at 18:58

James Johnson

45,496
8
73
110

Umm, maybe I'm misunderstanding your post, but how is it related to the original question at all? He has just one column, and no floated divs. And percentage heights make a lot of sense if the percentage is relative to the viewport. – phihag Oct 24 '11 at 19:03
It's not meant to be specific to floating divs, but rather displaying a div at 100% height of a container. In this case, the document body would be the container. – James Johnson Oct 24 '11 at 19:07

score 0 · Answer 6 · answered Oct 24 '11 at 19:01

0

There are two issues, you'll want to specify the height of the html as well, as in:

html, body {
    min-height: 100%;
}

Also there appears to be an issue in IE where min-height doesn't do the trick for the div but specifying height on the div does the trick. As such:

html, body {
    min-height: 100%;
    background: red;
}
div {
    height: 100%;
    background: grey;
}

answered Oct 24 '11 at 19:01

Cody

3,734
2
24
29

`min-height: 100%` is not enough when the page is embedded in an iframe. See https://jsfiddle.net/greggman/jbmaded2/ – gman May 05 '16 at 08:49

Why does 100% not mean 100% height?

6 Answers6

Linked

Related