无法获得div元素的高度

Question

It's a stupid question but I can't seem to figure it out. Basically I want the height of my div element. But some how it keeps returning 0. When i inspect the element in Chrome it gives me a height. Code:

HTML

<div id="signup">
              <div class="panel">
              </div>
</div>

CSS:

.panel
{
  width: 90%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background: #0071bc;
  padding: 1em;
  border: 0.3em solid;
  border-color: #073b73;
  color: #ffffff;
  position: relative;
  left:0;
  right: 0;
  margin: auto;

}

JQuery:

alert($("#signup .panel").outerHeight());
alert($("#signup .panel").height());

I have used the above lines in the following methods:

$(document).ready(function(){
});

$(window).load(function(){
});

Every time I try to alert the height I just keep getting 0. What I have noticed is that in the CSS if I specify a height, ie height:361px; or height:40%; I get 361 or 40. But I dont want this. My panels height changes based on the elements with in it. I want signin's height once its rendered. I've now tried... I have no idea how to do this. Please help.

Answer 1

Why height returns as "0" with no data:

This seems right to me. height() returns the height without padding and margin. And because the element has no content ( data ) the height is returned as 0.

Why it works with outerHeight:

The reason chrome shows a height is because you have padding and borders. Which is why you get a value for outerheight() . OuterHeight() will return the height with padding and borders. And if you use outerHeight(true) you will get the height of the element plus the padding, border, and margin.

NOTE:

If you want the height of an element including padding but not the border. You would use innerHeight() . and innerHeight(true) if you want padding and margin height without border height.

See Documentation :

Answer 2

The code as is works, as shown in this fiddle . If the code is not functioning, the problem is elsewhere. Make sure jQuery is linked, and there are no errors in the console.

The fiddle HTML:

<div id="signup">
  <div class="panel">
    Tons of Content<br>
    Even More Content
  </div>
</div>

The fiddle jQuery:

$(document).ready(function(){
  console.log($("#signup .panel").height());
});