In VueJs offsetHeight is 0 after mounted

Question

This is NOT a duplicate of Expanding a parent <div> to the height of its children. @craig_h's answer perfectly solved my question.

When I try to get the offsetHeight of the $el in the mounted hook, it returns 0.

Here is a jsfiddle: https://jsfiddle.net/BraveOstrich/zey5eL5v/11/.

//HTML
<div id="app">
  <div class="test"></div>
</div>

//JS
new Vue({
  el: '#app',
  mounted() {
    console.log('$el.offsetHeight', this.$el.offsetHeight)
  }
})

In log, it shows $el.offsetHeight 0.

Possible duplicate of [Expanding a parent
to the height of its children](https://stackoverflow.com/questions/384145/expanding-a-parent-div-to-the-height-of-its-children) — thanksd, Sep 22 '17 at 13:09

score 0 · Accepted Answer · answered Sep 22 '17 at 13:07

That's not a Vue error, it's because you have floated your div which removes it from the page flow, so this.$el has no height. Here's your JSFiddle without the float, which returns the correct height:

https://jsfiddle.net/zey5eL5v/12/

and here it is if you add overflow:auto; to your app css: https://jsfiddle.net/zey5eL5v/14/

In VueJs offsetHeight is 0 after mounted

1 Answers1