Css - Why Doesn't Percentage Height Work

CSS – why doesn’t percentage height work?

The height of a block element defaults to the height of the block's content. So, given something like this:

<div id="outer">
    <div id="inner">
        <p>Where is pancakes house?</p>
    </div>
</div>

#inner will grow to be tall enough to contain the paragraph and #outer will grow to be tall enough to contain #inner.

When you specify the height or width as a percentage, that's a percentage with respect to the element's parent. In the case of width, all block elements are, unless specified otherwise, as wide as their parent all the way back up to <html>; so, the width of a block element is independent of its content and saying width: 50% yields a well defined number of pixels.

However, the height of a block element depends on its content unless you specify a specific height. So there is feedback between the parent and child where height is concerned and saying height: 50% doesn't yield a well defined value unless you break the feedback loop by giving the parent element a specific height.

Why is percentage height not working on my div?

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>

Css height in percent not working

You need to set a 100% height on all your parent elements, in this case your body and html. This fiddle shows it working.

html, body { height: 100%; width: 100%; margin: 0; }div { height: 100%; width: 100%; background: #F52887; }

<html><body><div></div></body></html>

Div container height percentage not working

#bigwrap {
    position: relative;
    height: 70%;; //only need one semi-colon
}

The height has two semi-colons. But it still might not work. So if it doesnt work, try this:

body, html {
   height: 100%;
}

Minimum height and height, or just height needs to be set to 100%.

div height by percentage doesn't works on Chrome 63

I tested this in Firefox and it looked the same as chrome, I think this will answer the underlying issue though.

When you use a percent you are saying be this much of your parent if the parent is 100px tall and you set the child's height to 100% the child will be 100px.

In this instance .table_root, table's parent, is just taking up as much space as it needs.

You can fix this by setting HTML, body and .table_root to 100%, which will take up 100% of the screen. Alternatively, you can use vh rather than % vh is viewport height 100vh equates to 100% of the viewport height.

Example with %

body, html {  height: 100%;  margin: 0;}
div {  height: 100%;  background: tomato;}

<div>100% example</div>

Why does min-height with percentage work without container height?

You wrote:

According to css specification on min/max-height, if I don't provide a fixed height for the containing block any percentage min-height value will be treated as 0.

That's 100% correct. That's what the spec says.

<percentage>

Specifies a percentage for determining the used value. 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 percentage value is treated
as 0 (for min-height) or none (for max-height).

https://www.w3.org/TR/CSS22/visudet.html#min-max-heights

You wrote:

I have the following example showing that this is either implemented with some quirks or I'm missing something very obvious.

Also correct. You're not missing anything, but you're on the right track with "some quirks".

For many years, major browsers adhered to a strict interpretation of spec language with regard to percentage heights. In other words, without an explicitly defined height on the parent, a percentage height on the child wouldn't work as intended. It would resolve to auto or 0 or none, per the respective rule for height, min-height or max-height.

In recent years, however, most major browsers have loosened their interpretation and now accept other forms of height – such as flex heights – as an acceptable parent reference.

The only browser that appears to continue with the strict interpretation is Safari. Without a defined height (using the height property) on the parent, percentage heights on the children will fail.

It doesn't help matters that the height property definition hasn't been updated since 1998 (CSS2). With the advent of multiple new ways to establish box height, this definition is thoroughly obsolete. It appears that browser makers aren't waiting around for an update from the W3C.

For more details and examples see: Chrome / Safari not filling 100% height of flex parent

Why doesn't percentage height work with display: table-cell?

Based on the fact that you have width and height of 100% declared I'm going to assume that you're not expecting anyone to have to scroll here. See this Fiddle where I have a working solution based on those parameters.

Remember that display: table-cell; acts exactly like <td> elements and they won't render correctly unless they're in a <table> (or a container that is display: table;).

The other problem is that <html> and <body> aren't necessarily the height of the screen if the content is very small. html, body { height: 100%; } fixes this but it's a bit hacky.

Css - Why Doesn't Percentage Height Work