why is the height property with percentage value not working on my div

why is the height property with percentage value not working on my div  using -'jquery,html,css'

I have styling problem.

Below is my code

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

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

    <div id="leaflet_map" ng-controller="iPortMapJobController">
        <leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet>

And the screenshot attached.  The problem is the styling, if you see both the div's have a height of 90% but the display is different.

I have tried to put an outer div but that has not helped. Can someone explain why I am having this problem. Also, its the same on FF, Chrome, Opera & Safari.

asked Sep 15, 2015 by CarolineCade
0 votes

2 Answers

0 votes

Use vh (vertical height) instead of percentage. It will get the height of the browser and size it accordingly

 e.g. height:90vh;

try this code

  JS Bin

with css

#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;}
answered Sep 15, 2015 by SheilaWncfrl
0 votes

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 element is assigned a height of 1000px, then a child div with height: 90% would be 900px in height.

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

From the W3C height property definition:

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'.

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

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.


answered Sep 15, 2015 by MelJNC