Height Style Property Doesn't Work in Div Elements

height style property doesn't work in div elements

You cannot set height and width for elements with display:inline;. Use display:inline-block; instead.

From the CSS2 spec:

10.6.1 Inline, non-replaced elements

The height property does not apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.)

EDIT — You're also missing a ; terminator for the height property:

<div style="display:inline; height:20px width: 70px">My Text Here</div>
<!--                                  ^^ here                       -->

Working example: http://jsfiddle.net/FpqtJ/

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>

I am not able to apply style attribute height to div

First of all using inline styles is not a good ideea. They are very hard to read/edit and very hard to overwrite.

Second, you set height 100% on the parent div ( the one with display:flex ) . height:100% has to be relative to the height of a container. In your case html,body which don't have any height because you don't have any content.

Third, you set height:auto on the child div. height:auto is depending on the content of the element but you don't have any content.

My guess is that you want to have the parent div with height:100% of screen. You can use viewport height ( 100vh ) or you can set a height of 100% to body,html like in the example below

body,html {  height: 100%}

<div style="clear:both;display:flex; height: 100%;">  <div style="width:400px; background-color: red;        height:auto;">  </div>  <div style="width:100%;        background-color: black;        height:auto;">  </div></div>

Empty div (with style: height) will not display

If you just want to add white space try this

<div style="height:400px; width:100%; clear:both;"></div>

FIDDLE

or you could just add padding to the body like body { padding-top: 400px; }

How to fix div height

A solution with your requirements and example code:

gridDiv container must always take up 60% of the screen

Assuming your div looks like this: <div class="gridDiv"> you can use the following code:

html, body{
    height:100%;
}

.gridDiv{
    height: 60%;
}

gridDiv has a scroll bar if the content inside overflows

.gridDiv{
    overflow:scroll;
}

See the entire div with overflowing filler text on this JSFiddle.

CSS Transition doesn't work on height property

So the problem is that you try to transition the height to 100% - but CSS can't handle that right away.

Fast but problematic solution:
You could set the height in the :hover to a fixed amount, e.g. 100px.

But if you want to have a new item in there or change the size of the items, you would have to adjust the height manually.

What I would do:
First I would restructure the HTML a bit and move the trigger out of the item list:

<nav>
    <button class="trigger">
        <i class="fas fa-bars"></i>
    </button>
    <ul class="icons fas-container">
        <li><i class="fas fa-home"></i></li>
        <li><i class="fas fa-users"></i></li>
        <li><i class="fas fa-concierge-bell"></i></li>
        <li><i class="fas fa-pen"></i></li>
        <li><i class="fas fa-phone-alt"></i></li>
    </ul>
</nav>

Then I would adjust the CSS of the .icons:

(remove the height, add a max-height and adjust the transition)

nav ul.icons {
    background: #fff;
    width: 60px;
    overflow: hidden;
    border-radius: 60px;

    max-height: 0;
    transition: max-height 0.2s ease-out;
}

In the end I would let JavaScript take care of getting the max-height right.

On hover:

let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
btn.onmouseover = function () {
    icons.style.maxHeight = icons.scrollHeight + "px";
}
btn.onmouseout = function () {
    icons.style.maxHeight = null;
}

Or on click (if you would rather do that):

let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');

btn.onclick = function() {
    if (icons.style.maxHeight){
        icons.style.maxHeight = null;
    } else {
        icons.style.maxHeight = icons.scrollHeight + "px";
    }
}

Here are some (maybe) helpfull links:

https://www.w3schools.com/howto/howto_js_collapsible.asp
How can I transition height: 0; to height: auto; using CSS?
https://codepen.io/felipefialho/pen/ICkwe

Snippet:

let btn = document.querySelector('.trigger');
    let icons = document.querySelector('.icons');
    btn.onmouseover = function () {
        icons.style.maxHeight = icons.scrollHeight + "px";
    }
    btn.onmouseout = function () {
        icons.style.maxHeight = null;
    }

body {
        background: #222;
    }

    .trigger {
        cursor: pointer;
    }

    nav {
        position: absolute;
        top: 30px;
        right: 30px;
        color: #222;
    }

    nav ul.icons {
        background: #fff;
        width: 60px;
        overflow: hidden;
        border-radius: 60px;

        max-height: 0;
        transition: max-height 0.2s ease-out;
    }

    nav ul.icons:hover {
        height: 100%;
    }

    nav ul li {
        list-style: none;
    }

<html lang="en">

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
<nav>
    <button class="trigger">
        <i class="fas fa-bars"></i>
    </button>
    <ul class="icons fas-container">
        <li><i class="fas fa-home"></i></li>
        <li><i class="fas fa-users"></i></li>
        <li><i class="fas fa-concierge-bell"></i></li>
        <li><i class="fas fa-pen"></i></li>
        <li><i class="fas fa-phone-alt"></i></li>
    </ul>
</nav>
</body>

</html>

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>

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.

Height Style Property Doesn't Work in Div Elements