86

I have two divs with a height of 90%, but the display is different.

I have tried to put an outer div around them, but that has not helped. Also, it's the same on Firefox, Chrome, Opera, & Safari.

Can someone explain why I am having this problem?

Below is my code: 

<div style="height: 90%">
    <div ng-controller="TabsDataCtrl" style="width: 20%; float: left;">
        <tabset>
            <tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
               disabled="tabs[0].disabled">
            </tab>


            <tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
                 disabled="tabs[2].disabled">
            </tab>
        </tabset>
    </div>

    <div id="leaflet_map" ng-controller="iPortMapJobController">
        <leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet>
    </div>
</div>
Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
victor
  • 1,253
  • 3
  • 15
  • 22

2 Answers2

205

Working with the CSS height property and percentage values

The CSS height property, when used with a percentage value, is calculated with respect to the element's containing block.

Let's say your body element has height: 1000px. Then a child with height: 90% would get 900px.

If you have not set an explicit height to the containing block (and the child is not absolutely positioned), then your child element with percentage height will have nothing to go on and height will be determined by content and other properties.

From the spec:

10.5 Content height: the height property

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 and this element is not absolutely positioned, the value computes to 'auto'.

auto
The height depends on the values of other properties.

Hence, if you want to use percentage heights in your divs, specify the height of all parent elements, up to and including the root element (e.g., html, body {height:100%;})

Note that min-height and max-height are not acceptable. It must be the height property.

Here's a little summary:

John: I want to set the height of my div to 100%.
Jane: 100% of what?
John: 100% of its container. So, the parent one-level up.
Jane: Okay. And what's the height of the div's parent?
John: Doesn't have one. Auto, I guess. Content-driven.
Jane: So, you want the div to have a 100% height of an unknown variable?
John: [silence]
Jane: Hey John, can I have 50% of that?
John: 50% of what?
Jane: Exactly!
Jane: Percentages are relative values. You always have to ask "percentage of what?". By declaring an explicit height for each parent all the way up to body and html you establish a frame of reference for each child with percentage height, enabling the height to work.

Examples

Let's say you want a div to have 50% height of its parent.

This won't work:

<article>
    <section>
        <div style="height:50%"></div>
    </section>
</article>

Neither will this:

<article>
    <section style="height:100%">
        <div style="height:50%"></div>
    </section>
</article>

And neither will this:

<article style="height:100%">
    <section style="height:100%">
        <div style="height:50%"></div>
    </section>
</article>

This will fail, too:

<body style="height:100%">
    <article style="height:100%">
        <section style="height:100%">
            <div style="height:50%"></div>
        </section>
    </article>
</body>

NOW, it will finally work:

<html style="height:100%">
    <body style="height:100%">
        <article style="height:100%">
            <section style="height:100%">
                <div style="height:50%"></div>
            </section>
        </article>
    </body>
 </html>

And this would work, as well:

<article>
    <section style="height: 500px">
        <div style="height:50%"></div>
    </section>
</article>

But not this:

<article>
    <section style="min-height: 500px">
        <div style="height:50%"></div>
    </section>
</article>

sample code

Use 100vh

As you can see, percentage heights are a bit tricky. You can avoid the complexity (i.e., never have to consider parent elements) by simply using viewport percentage heights. Whenever you want a box to be the height of the viewport, use height: 100vh instead of height: 100%. Nothing else is needed.

Absolute Positioning Exception

As noted in the spec, an absolutely positioned element is an exception to the rule for percentage heights. More details here: Applying 100% height to nested, non-flex elements.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • `**Will this work?**`

    - Isn't the default of a tag always 100% (it fills as much as possible), so if the parents height wasn't declared the body in my example above would simply fill out the whole html. In other words it is going to work. Am I wrong?

     – Bjango Dec 25 '17 at 21:20
  • 2
    @Bjango, yes, that is incorrect. HTML elements generally default to `height: auto` (the height of the content), not `height: 100%`. Width, on the other hand, defaults to `width: 100%` (the width of the parent) on block-level elements. – Michael Benjamin Dec 25 '17 at 23:13
  • 1
    Here's a more detailed explanation: https://stackoverflow.com/a/46546152/3597276 – Michael Benjamin Dec 25 '17 at 23:14
  • Here's a rare exception, where elements default to `height: 100%`: https://stackoverflow.com/q/32214152/3597276 – Michael Benjamin Dec 25 '17 at 23:15
  • What about a fixed height header and you want to fill the remaining height under it – Epirocks Mar 13 '18 at 10:59
  • 2
    Haha I feel like I just read a Head First CSS book after reading this answers' summary section. Nice job! – Nico Van Belle May 07 '18 at 07:05
  • @Michael_B hello! I have this jsfiddle https://jsfiddle.net/hasugamer/bjq8rn0s/147/ where I encounter a weird situation: So what I want to achieve is have a grid (consisting of thirds) laid out over some content (whatever that is, text, picture, etc) pretty much like in this scenario: https://codepen.io/rm/pen/nemsu. But in the codepen example I feel like it was done pretty much hardcoded and I want it to be responsive (resize height etc). But before I get there I need to lay out the table over the content and it won't work. It's height won't stretch even with absolute pos, but a div will. – Marius Mucenicu Jan 21 '19 at 06:10
  • @Michael_B also please note that I've left some comments in the fiddle to explain better what's going on. The gist of it is that I have a `container` which has an `auto` height. I'd like to have a `table` which I could put on top of that container and match its height without knowing explicitly what its height is. In my mind this can be determined at rendering time? I don't necessarily need a `table`, I've noticed that a `div` would work however I'd like to understand why a `table` won't or if you could please point me in the right direction with the documentation. Thank you! – Marius Mucenicu Jan 21 '19 at 06:21
  • I'm not sure there is any official documentation outlining this behavior. It looks more like differences in browser implementation. Note that [your code](https://jsfiddle.net/9dfp8x0n/1/) works in Firefox. @George – Michael Benjamin Jan 24 '19 at 12:08
  • You're combining percentage heights (which has [well-documented rendering variations](https://stackoverflow.com/a/35537510/3597276) among browsers), HTML table elements (which have its own [complex rendering algorithm](https://www.w3.org/TR/CSS22/tables.html), and which the W3C even admits is *"not fully defined"*, and which leads to additional rendering variations among browsers), and CSS absolute positioning (which removes the table from the document flow, again complicating matters). – Michael Benjamin Jan 24 '19 at 12:11
  • My suggestion would be to use the simplest combination of elements and styles possible. Using a div, instead of a table, would be a good start in my opinion. You can emulate a table layout using CSS flex and grid layouts. Also, consider posting a formal question. This issue is interesting and may be useful to others (plus I may have missed something). @George – Michael Benjamin Jan 24 '19 at 12:22
  • 1
    @Michael_B phew, I really didn't think you'd answer after a few days haha. Thank you so much for the reply. Okay, I will post a formal question about this issue, as I've done some research and it's not a duplicate of anything (as you might have noticed). See you on that thread, I'll ping you here with the link – Marius Mucenicu Jan 24 '19 at 13:16
  • @Michael_B as promised: https://stackoverflow.com/questions/54368342/html-css-why-wont-relative-height-work-on-an-absolutely-positioned-table-but-w – Marius Mucenicu Jan 25 '19 at 15:33
  • @MichaelBenjamin But let's think we have displa-inline block containe and don't have explicit width but have 2 inner element (display inline-block) one of them have explicit width and container width will width of child and if i give other inner element width with percentage child width will relative implicit width of container but this is not work for height why? – Murad Sofiyev Jul 23 '20 at 09:13
  • 1
    Thank you so much for this answer! My issue was there was a `min-height` in the chain and I had no idea it was causing the children `height: 100%`s to fail – Geoff Davids Mar 10 '21 at 11:21
  • Will a percentage work if the parent div has height specified using vh? e.g. parent div height = 90vh, child div height=100%. This is not working for me currently. – Marlo Sep 19 '21 at 22:37
  • Thank you @MichaelBenjamin. I liked the conversation part. It solved my issues in under 30 seconds. Awesome. – Varad Dec 06 '21 at 02:36
  • It is incorrect to say that the height is inherited directly from the parent element. After all, the height can be flexible, regardless of whether the height is specified directly in the parent element. Also the statement about min-height is incorrect. Here is a simple example of when it will work: `
    ` [example](https://codepen.io/imhvost/pen/MWPXYVG)     – imhvost May 11 '23 at 21:16
46

Use vh (viewport height) instead of percentage. It will get the height of the browser and size it accordingly, e.g.

height:90vh;

try this code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id ="wrapper">
    <div id="tabs" ng-controller="TabsDataCtrl">
        <tabset>
            <tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
               disabled="tabs[0].disabled">
            </tab>


            <tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
                 disabled="tabs[2].disabled">
            </tab>
        </tabset>
    </div>

    <div id="leaflet_map" ng-controller="iPortMapJobController">
        <leaflet center="center" markers="markers" layers="layers"></leaflet>
    </div>
    </div>
</body>
</html>

with css

<style>
    #wrapper{height:60vh;}
    #tabs {width:20% float:left; height:60vh; overflow-y:scroll; overflow-x:hidden;}
    #leaflet-map{width:78%; height:60vh; overflow-y:scroll;  overflow-x:hidden;}
</style>
Electric Coffee
  • 11,733
  • 9
  • 70
  • 131
Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
  • 2
    it didn't make a difference – victor Jul 30 '15 at 15:42
  • I changed the css a bit, its now like #wrapper { height: 90vh; } #tabs { width: 20%; float: left; height: 90vh; overflow-y: scroll; overflow-x: hidden; } #leaflet-map { width: 78%; float: right; overflow-y: scroll; overflow-x: hidden; } – victor Jul 30 '15 at 16:08