Incorrect height of div returned by JS functions. Why?

Question

I try to get size of main div on page, to make iframe change its height to content, but document.getElementById("divId").offsetHeight (also try innerHeight) return wrong value. It always returns 247, but in fact page looks like it cut on 75%. I have an idea that page didn't load fully, so I put resize code in the footer of the page, but it still return 247.

$(document).ready(function() {
     console.log(document.getElementById("resizeDiv").offsetHeight);
});

Any suggestions?

console.log(document.getElementById("resizeDiv").height); giving? — Arun Killu, Oct 30 '12 at 11:43
Do it in `$(window).load(` instead of in `$(document).ready(` — techfoobar, Oct 30 '12 at 11:44
What does jQuery `.height()` give? Also, your HTML/CSS is probably crucial to answering the question. — pimvdb, Oct 30 '12 at 11:44
Can you setup a demo on http://jsfiddle.net? Probably the values returned are correct, but you are expecting something different. It depends on how your elements are defined in HTML/CSS. — pimvdb, Oct 30 '12 at 15:05

score 2 · Accepted Answer · answered Oct 30 '12 at 12:01

I have found other decision, I just get height of body and it works good:

var height = Math.max(
    document.body.scrollHeight, 
document.body.clientHeight, 
document.body.offsetHeight, 
document.documentElement.scrollHeight, 
document.documentElement.offsetHeight, 
document.documentElement.clientHeight);

score 0 · Answer 2 · answered Oct 30 '12 at 11:44

0

try this

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

answered Oct 30 '12 at 11:44

Buzz

5,128
4
30
47

score 0 · Answer 3 · edited May 23 '17 at 11:46

0

You're already using jQuery, why not try:

$(function() {
    $('#resizeDiv').height();
});

It sounds like you may be trying to resize an iFrame based on the content inside it. If you are trying to do that, this question has already been answered here:

Resizing an iframe based on content

edited May 23 '17 at 11:46

Community

1
1

answered Oct 30 '12 at 11:45

White Elephant

1,331
2
12
28

what`s the difference between raw height method of JS and wrap of Jquery? :-) I suppose none, cause Jquery calls raw JS method. I checked, it gives the same value. – sphinks Oct 30 '12 at 11:58
Looking at the jQuery source, $(target).height() is an alias for $(target).css('height'); – White Elephant Oct 30 '12 at 14:25

score 0 · Answer 4 · answered Oct 30 '12 at 11:48

document.getElementById("resizeDiv").offsetHeight, it gives the actual height of the element in pixels. The value includes the height of any padding and borders.

document.getElementById("resizeDiv").style.height is similar to .height, except you're asking for the height part of the style attribute.

document.getElementById("resizeDiv").height is only valid if the element has a height attribute, such as an IMG tag:

<img src="..." width="200" height="300">

It's a shorthand for document.getElementById("resizeDiv").getAttribute("height").

score 0 · Answer 5 · answered Jun 15 '20 at 17:55

You may need to load your function after the DOM is loaded.

window.addEventListener('DOMContentLoaded', (event) => {
  // do something
});

See Mozilla documentation

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Incorrect height of div returned by JS functions. Why?

5 Answers5