My blog has a content div
with an id
of #content
. When I select it, e.g. with Firebug it outlines the full height of the div
, with all its padding and margins at the top and the bottom.
jQuery height()
returns only the inner height of the element itself.
How can I query the full height of the element? If there are other elements with a lot padding and margin in them I want all of it added up and as one value.
Which method should i use?
The jQuery outerHeight () and outerWidth () methods get the outer height and width. This outer height and width get the outer height and width of an element. Outer height and width include padding and border.
Conclusion: If you need to know the total height of an element occupies including the width of the visible content, scrollbars (if any), padding, and border, we can use offsetWidth. It returns the layout height of the currently visible part of the element which is rounded to an integer value.
The first method is to use the offsetHeight property. It is a read-only property that returns the height of an element in pixels, including border, padding, and scrollbar. We’ll use the following syntax in our example:
Therefore, we should see 18 logged, which is the height of the div in pixels. To get the height of an element with React, we can assign a ref to the element we want to get the height for. Then we can use the clientHeight property to get the height.
You can use outerWidth
and outerHeight
functions available after jQuery >= 1.3.
$(elemenet).outerHeight()
will return height including height with borders and paddings
use $(element).outerHeight(true)
to include margins as well.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With