Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get the height of a DIV considering inner element's margins?

Consider de following markup:

<div id="outerElement">
    <div id="innerElement" style="border: 1px solid blue; background-color: #f0f3f5; margin-top: 100px">  
        TESTE
    </div>
</div>

I want to get the actual final height of outerElement using javascript. I noticed that if I remove the vertical margins from innerElement I am able to get what I want but I cannot alter styles from within the outerElement.

How do I do this?

Obs: I already tried height, scrollheight and offsetHeight in all browsers. Chrome gives me the expected value (including inner element's margins) for scrollHeight. All other browsers fail.

like image 275
André Pena Avatar asked Mar 31 '10 17:03

André Pena


People also ask

How do you find the height of an element including margin and padding?

The HTMLElement. offsetHeight read-only property returns the height of an element, including vertical padding and borders, as an integer. Typically, offsetHeight is a measurement in pixels of the element's CSS height, including any borders, padding, and horizontal scrollbars (if rendered).

How can I get specific height of a div?

Method 1: Using the offsetHeight property: The offsetHeight property of an element is a read-only property and used to return the height of an element in pixels. It includes any borders or padding of the element. This property can be used to find the height of the <div> element.

How do you find the inner content height?

var height = document. getElementById('content'). clientHeight; That will not include any borders or scrollbars in the element, just padding.


1 Answers

I'd use jQuery. Try using

$("#myelementId").height()

And see if that does it.

like image 104
Levi Hackwith Avatar answered Sep 27 '22 17:09

Levi Hackwith