Why CSS Height 100% Is Not Applying for Normal Div

Why doesn't height: 100% work to expand divs to the screen height?

In order for a percentage value to work for height, the parent's height must be determined. The only exception is the root element <html>, which can be a percentage height. .

So, you've given all of your elements height, except for the <html>, so what you should do is add this:

html {
    height: 100%;
}

And your code should work fine.

* { padding: 0; margin: 0; }html, body, #fullheight {    min-height: 100% !important;    height: 100%;}#fullheight {    width: 250px;    background: blue;}

<div id=fullheight>  Lorem Ipsum        </div>

CSS div height 100% not working

You could set the height of parent div1 to 1000px and set the children's height to :inherit.
Here's an example:

#div1{    width:1024px;    height:1000px;    background:red;    overflow:hidden;}#div2{        float:left;    width:100%;    height:inherit;    background:yellow;}#div3{        float:left;    width:460px;    height:inherit;    background-image:url('http://www.ricoh-imaging.co.jp/english/r_dc/caplio/r7/img/sample_04.jpg');    background-size:100% 100%;    background-position:bottom;    background-repeat:no-repeat;}
#div4{    float:left;     width:270px;    height:inherit;    background:violet;}
#div5{    float:left;    width:25px;    height:inherit;    background:black;}
#div6{    float:left;    width:269px;    height:inherit;    background:blue;}

<div id="div1" class="center">    <div id="div2">        <div id="div3"></div>        <div id="div4"></div>        <div id="div5" ></div>        <div id="div6"></div>    </div></div>

Why css height 100% is not applying for normal div?

For % to work you need to set height for parent element as well.

Set html, body {height: 100%}

From the Docs -

The is calculated with respect to the height of the
containing block. If the height of the containing block is not
specified explicitly, the value computes to auto. A percentage height
on the root element (e.g. ) is relative to the initial
containing block (whose dimensions are equal to the dimensions of the
viewport).

Check more on this at - MDN Percent Doc

So in your case, you can do like this -

<!DOCTYPE html>
<html>
    <head>
        <style>
            html,body{height:100%;}
        div{height:100%;width:100%;background:red;position:relative;}
        </style>
    </head>
    <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>

Why height=100% doesn't work?

In general, for an element using percent on height to pick up its parent's height, the parent need a height other than auto or being positioned absolute, or the height will be computed as auto.

Based on those 2 options, and as you mentioned in a comment, your own header is dynamic in height, you are left with absolute positioning.

The problem with adding absolute to the content, it will be taken out of flow and stop behaving as a normal flowed flex item, the good news, one can add a wrapper set to absolute.

Stack snippet

.container {  display: flex;  flex-direction: column;  width: 200px;  height: 100px;}
.header {  display: flex;  background-color: rgba(255, 0, 0, 0.5);}
.content {  position: relative;                               /*  added  */  flex-grow: 1;  background-color: rgba(0, 255, 0, 0.5);}
.wrapper {  position: absolute;                               /*  added  */  left: 0;                                          /*  added  */  top: 0;                                           /*  added  */  right: 0;                                         /*  added  */  bottom: 0;                                        /*  added  */}
.third-party-component {  height: 100%;  width: 100%;  background-color: rgba(0, 0, 255, 0.5);}

<div class="container">  <div class="header">Header</div>  <div class="content">    <div class="wrapper">      <div class="third-party-component">       Third party component      </div>    </div>  </div></div>

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>

Div not filling out even at min-height:100%;

When you use height: 100% for sidebar, it will be 100% of its parent component. The parent of sidebar is body so it will take the 100% height of body.

The parent of body is html, but you haven't added height for it.

First method

Add the height for html tag.

html {
height: 100%
}

Second method

Use height: 100vh for the body or sidebar to make the height of sidebar equal to the height of viewport i.e. full height of browser. In my opinion it will be better if you add it to body.

100vh means 100% of viewport height.