Percentage Height HTML 5/Css

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.

Percentage Height HTML 5/CSS

I am trying to set a div to a certain percentage height in CSS

Percentage of what?

To set a percentage height, its parent element(*) must have an explicit height. This is fairly self-evident, in that if you leave height as auto, the block will take the height of its content... but if the content itself has a height expressed in terms of percentage of the parent you've made yourself a little Catch 22. The browser gives up and just uses the content height.

So the parent of the div must have an explicit height property. Whilst that height can also be a percentage if you want, that just moves the problem up to the next level.

If you want to make the div height a percentage of the viewport height, every ancestor of the div, including <html> and <body>, have to have height: 100%, so there is a chain of explicit percentage heights down to the div.

(*: or, if the div is positioned, the ‘containing block’, which is the nearest ancestor to also be positioned.)

Alternatively, all modern browsers and IE>=9 support new CSS units relative to viewport height (vh) and viewport width (vw):

div {
    height:100vh; 
}

See here for more info.

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>

percentage height to child inside of parent element with view port height does not work

There are two issues preventing your code from doing what you want:

Class names cannot contain certain characters, like percent signs and as user 3in0 mentioned - square brackets which can be confused with the CSS attribute selector.
Percentage heights are based on the parent's height, but not it's min/max height, which are not factored into the calculation. I assume you are using min-height given the classname, so your 90% child height will be 90% of auto (inital/default value). Auto essentially means 'whatever height you need' - 90% of auto = auto.

.min-h-80vh {
  background-color: seagreen;
  height: 80vh;
}

.h-90 {
  background-color: coral;
  height: 90%;
}

<div class="min-h-80vh">
  <div class="h-90">test</div>
</div>

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 set to percent, is it relative to the parents content box, or padding box, etc

The % based size of the child is indeed calculated with respect to the size of the parent, and it does take into account box-sizing.

See this demo:

.box {  width: 100px;  height: 100px;    padding: 10px;  margin: 10px;  border: 10px solid black;    background-color: red;  color: white;}
.content-box {  box-sizing: content-box;}.border-box {  box-sizing: border-box;}
.child {  width: 100%;  height: 100%;  background-color: blue;}

<body>  <div class="box content-box">    <div class="child">Content Box</div>  </div>    <br/>
  <div class="box border-box">    <div class="child">Border Box</div>  </div></body>

Why the height of an element expressed in percentage does not work?

As others have said, % works from the container of the element, so you need to manually set a height / width for body.

However, you could also use vh / vw, which are units for a percent of the viewport height, and viewport width respectively

body {  background: #cccede;}
.square {  width: 50vw;  height: 50vh;  border: 2px solid black}

<body>  <div class="square"></div></body>