CODEWITHSUNDEEP
htmlcss
Mild Fuzz
Mild Fuzz

Reputation: 30823

Why does 100% not mean 100% height?

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;
}

Upvotes: 12

Views: 10219

Answers (6)

Rejneesh Raghunath
Rejneesh Raghunath

Reputation: 1724

This will work

   body, html {
      height: 100vh;
    }

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

Upvotes: 0

Ryan Kinal
Ryan Kinal

Reputation: 17732

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

Upvotes: 19

Joseph Marikle
Joseph Marikle

Reputation: 78590

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.

Upvotes: 6

Cody
Cody

Reputation: 3764

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;
}

Upvotes: 0

James Johnson
James Johnson

Reputation: 46077

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?

Upvotes: 0

phihag
phihag

Reputation: 288290

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;
}

Upvotes: 11

Related Questions