Get element height in JS or jQuery with CSS height: 0;

Question

I'm trying to get their height of an element, but the height is set with css to:

height: 0;

So when I log the console I get a height of 0, but I want to get the real height of the element.

I have also tried:

$('nav').prop('scrollHeight');

as someone suggested, but the height it gave me was a bit off.

My HTML markup is very simple"

<nav>
<ul>
<li>
text 1
</li>
<li>
text 2
</li>
<li>
</li>
</ul>
</nav>

CSS is:

nav {
    height: 0;
    margin: 0;
    padding: 0;
    display: block;
}

Any ideas?

Answer 1

If you want to get the default height of a block that is currently height: 0 then try:

document.getElementById("blockid").scrollHeight

It should return the correct value unless you're messing something up.