Why Is Percentage Height Not Working on My Div

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>

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>

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 with no content and percentage height is not appering

You can use css min-height property to set a min height of the div element.Right now parent element has not height.That's why its not showing

     html, body
     {
    height: 100%;
     }
     #adelediv {
           float: left;
           height:100%;
           width: 100%;
           background-image: url(hello.gif);
           background-size: cover;
        }

https://www.your-plugin.com

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>

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.

min-height: 100% doesn't seem to work, div does not take full height

You need to set parent elements height to 100% as well. In your case, set body's height to 100%.

html {  height: 100%;}
body {  padding: 1.25em;  background-color: #292c37;  border: 1px solid red;  height: 100%;}
.main-app {  min-height: 100%;  display: grid;  grid-template-rows: auto 1fr auto;  border: 1px solid green;}
header {  background-color: wheat;}
main {  background-color: firebrick;}
footer {  background-color: skyblue;}
header,main,footer {  padding: 1.25em;}

<div class="main-app">  <header>Header</header>  <main>Main</main>  <footer>Footer</footer></div>