css inline style height 100% is not applying for div

Question

In html I assigned div height as 100% in inline css,when loading height of div is changed as 0. Why its happen? refer this http://jsfiddle.net/CLjH3/3/

This is my code sample:

display();

function display() {
  var elementHeight = $("#container").height();

  alert("ElementHeight :" + elementHeight);

  var elementWidth = $("#container").width();

  alert("ElementWidth :" + elementWidth);
}

<head>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>

<body>
  <div id="container" style="height:100%;width:100%;border:solid 1px red;">
  </div>
</body>

score 0 · Answer 1 · answered May 03 '14 at 09:14

0

Set body and html height:

body, html {
    height: 100%;
}

answered May 03 '14 at 09:14

A. Wolff

74,033
9
94
155

score 0 · Answer 2 · edited May 23 '17 at 12:20

Demo

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, 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

sources one two

css inline style height 100% is not applying for div

2 Answers2