Questions tagged [offsetheight]

Height of an element relative to the element's offsetParent.

Syntax and values

var intElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;

intElemOffsetHeight is a variable storing an integer corresponding to the offsetHeight pixel value of the element. offsetHeight is a read-only property.

Description

Typically, an element's offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.

Non-scrollable elements (CSS overflow not set or set to visible) will have equal offsetHeight and scrollHeight (is this right? scrollHeight doesn't include the border, while offsetHeight would include border).

For the document body object, the measurement includes total linear content height instead of the element CSS height. Floated elements extending below other linear content are ignored.

37 questions
353
votes
4 answers

What is offsetHeight, clientHeight, scrollHeight?

Thought of explaining what is the difference between offsetHeight, clientHeight and scrollHeight or offsetWidth, clientWidth and scrollWidth? One must know this difference before working on the client side. Otherwise half of their life will be spent…
shibualexis
  • 4,534
  • 3
  • 20
  • 25
6
votes
5 answers

How to find shortest div with JQuery

How do I use JQuery to…
nash anderson
  • 61
  • 1
  • 3
4
votes
2 answers

How to smoothly scroll to an element via a hash in Nuxt?

So my goal is to create an anchor link menu with Nuxt.js which scrolls to the page section the user has clicked and now I have few different ways of doing it but I'm not sure which is the "correct one". Option 1: I created a menu which gets the…
Nicolas
  • 434
  • 1
  • 3
  • 13
3
votes
1 answer

Angular 2: Weird Behavior When Trying to Access Component's Height using ElementRef

I am trying to create an image slider in Angular2 as shown below. Slide Caption #1 Slide Caption #2 In my slider component, I would…
Mia
  • 31
  • 2
3
votes
2 answers

Does getting the offsetHeight of an element have a side effect?

In the code for Bootstrap collapse, in the hide() method, I see the following line: this.$element[dimension](this.$element[dimension]())[0].offsetHeight I don't understand what the point of the .offsetHeight at the end is unless it has a side…
Andy
  • 7,885
  • 5
  • 55
  • 61
3
votes
1 answer

Adding 1px padding causes outer div to contain child margins

When the child of a div contains margins, those margins are not included in the calculation of div.offsetHeight. Except, however, when you do certain things to the parent div, including giving it 1px of padding. The code below causes the reported…
Chris Middleton
  • 5,654
  • 5
  • 31
  • 68
2
votes
1 answer

Why does a parent's offsetHeight ignore its child's margin unless the parent has a border?

1) In a simple parent-child relationship, the inner child generally affects the outerHeight of the parent:
hello
outer1.offsetHeight == 18 2) If the inner child is given a margin, the parent's outerHeight…
mgiuffrida
  • 3,299
  • 1
  • 26
  • 27
1
vote
0 answers

React-Native Webview auto Height not working

I m using a Webview for rendering some content to a view, to calculate the height of the content I m using a script to get the height of the content, the span tag contains the content. ... //content …
samridhgupta
  • 1,695
  • 1
  • 18
  • 34
1
vote
1 answer

Angular - What other issues can cause offsetHeight to remain "0"?

I need to know a rendered element's height. I don't care if the element reports it or if the parent detects the height. I've been researching this issue and I the number one root cause is that the :host element must have its display:block set and…
Lorin S.
  • 754
  • 8
  • 29
0
votes
2 answers

How can I pass div height from JavaScript to CSS?

I want to set the position to a div depending on its own height which can be different depending on the content. This is the structure: HTML
Content
CSS: :root { --height: x; } .wrappper { height: auto; top:…
RASALGHUL
  • 89
  • 10
0
votes
2 answers

Finding the height of an element and then using that value to set the height of another element

I am using react, typescript and tailwind. I want one element's height to match the height of another element. It would be very simple usually but I have a complicated div structure so I can't do it in a normal way. What I have attempted is to…
Travis
  • 117
  • 1
  • 8
0
votes
0 answers

Why does .offsetHeight take so long to load

So i am reading the height of an element using .offsetHeight within a window.onload listener. This means that the html elements must have loaded. However, if i use the same code but instead of using the window.onload i use a setTimeout with a 100ms…
0
votes
2 answers
0
votes
0 answers

div offsetHeight behavior on mobile is different

I am trying to get offset height of div to do some calculations and I noticed that it always returns the same height even on smaller screens and mobiles when the div height is different, so I don't get it why doesn't it return the correct height on…
NQQ
  • 51
  • 1
  • 5
0
votes
1 answer

Is it possible to use querySelectorAll with offsetHeight?

I would like to know if it's possible to get the height of many element with offsetHeight

My Title

Damien
  • 1
  • 2
1
2 3