By victor


2015-07-30 15:30:16 8 Comments

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>

2 comments

@Michael_B 2015-07-30 16:05:30

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.

@Bjango 2017-12-25 21:20:03

<html><body style="height:100%">**Will this work?**</body></html> - 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?

@Michael_B 2017-12-25 23:13:53

@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_B 2017-12-25 23:14:53

Here's a more detailed explanation: stackoverflow.com/a/46546152/3597276

@Michael_B 2017-12-25 23:15:44

Here's a rare exception, where elements default to height: 100%: stackoverflow.com/q/32214152/3597276

@Epirocks 2018-03-13 10:59:11

What about a fixed height header and you want to fill the remaining height under it

@Nico Van Belle 2018-05-07 07:05:54

Haha I feel like I just read a Head First CSS book after reading this answers' summary section. Nice job!

@George 2019-01-21 06:10:46

@Michael_B hello! I have this jsfiddle 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: 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.

@George 2019-01-21 06:21:09

@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!

@Michael_B 2019-01-24 12:08:39

I'm not sure there is any official documentation outlining this behavior. It looks more like differences in browser implementation. Note that your code works in Firefox. @George

@Michael_B 2019-01-24 12:11:46

You're combining percentage heights (which has well-documented rendering variations among browsers), HTML table elements (which have its own complex rendering algorithm, 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_B 2019-01-24 12:22:50

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

@George 2019-01-24 13:16:12

@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

@George 2019-01-25 15:33:25

@Rachel Gallen 2015-07-30 15:37:35

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>

@victor 2015-07-30 15:42:47

it didn't make a difference

@victor 2015-07-30 16:08:20

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

Related Questions

Sponsored Content

45 Answered Questions

[SOLVED] How can I transition height: 0; to height: auto; using CSS?

31 Answered Questions

[SOLVED] Make a div fill the height of the remaining screen space

  • 2008-09-18 05:06:17
  • Vincent McNabb
  • 778651 View
  • 1495 Score
  • 31 Answer
  • Tags:   html css html-table

93 Answered Questions

[SOLVED] How to horizontally center a <div>?

29 Answered Questions

[SOLVED] How do I auto-resize an image to fit a div container

14 Answered Questions

[SOLVED] Click through div to underlying elements

  • 2010-09-09 20:42:54
  • Ryan
  • 555930 View
  • 1357 Score
  • 14 Answer
  • Tags:   css

31 Answered Questions

[SOLVED] How to make a div 100% height of the browser window?

  • 2009-10-15 21:18:43
  • mike
  • 1676073 View
  • 1846 Score
  • 31 Answer
  • Tags:   html css css3 height

9 Answered Questions

[SOLVED] Why does HTML think “chucknorris” is a color?

34 Answered Questions

[SOLVED] How to make div not larger than its contents?

  • 2009-01-16 16:03:07
  • George Snider
  • 1220322 View
  • 1798 Score
  • 34 Answer
  • Tags:   html css width

24 Answered Questions

[SOLVED] Creating a div element in jQuery

11 Answered Questions

[SOLVED] Why don't self-closing script tags work?

Sponsored Content