Javascript / jQuery : get height when max-height is set to 0

Question

Is it possible to get css value of attr height of element when it's max-height is set to 0?

I need this to know how much pixels of element to show onclick and since every element has different height that changes with size of the browser I want to get height values from css file.

http://jsfiddle.net/AqAJc/

Downtime

It sounds like you are hiding and showing elements based on events. Instead of setting the max-height property, look into display:none; or jQuery's hide() and show() methods. – Cherianne

He's likely using max-height so he can transition the element into view onClick. You can't transition from display:none to display:whatever. – Oloughlin

Answer 1

You can get the height of an element if you have max-height = 0 through the scrollHeight attribute. It works if you set min-height, but not height though.

HTML :

<div>
  Here you have a normal div
  <div id="toggable">
    Something hidden is in here, but we can still get the height !
    <div class="other-content">
      Something else here
    </div>
  </div>
</div>

JS:

alert(document.getElementById('toggable').scrollHeight)

CSS :

#toggable {
  max-height:0;
  overflow:hidden;
}
 
.other-content {
  min-height: 100px;
}

Demo : https://jsfiddle.net/asywL84u/2/

Reference : https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

Didymium

Answer 2

My first question would to be why are you using max-height: 0; is there something else you can use? Like hide() show() which use display: none

the only thing I can thing of would be to remove the max-height css get the height and then reapply the max-height:

$('.div').css('max-height', 'none')
console.log($('.div').height())
$('.div').css('max-height', '0')

This should happen fast enough that you wont see the element but it could be wise to hide it before removing the max-height with:

$('.div').hide()
$('.div').css('max-height', 'none')    
console.log($('.div').height())
$('.div').css('max-height', '0')
$('.div').show()

Alacrity

Note that using the value none means you cannot use CSS animation. – Flanders

Answer 3

$('.div').each(function(){
    var t=$(this); // Cache jQuery reference
    t.css('max-height','none'); // Temporarily override max-height
    t.data('height',t.height()); // Store height in data
    t.css('max-height',''); // Remove our max-height override
});
alert($('.div').data('height'));

jsfiddle: http://jsfiddle.net/AqAJc/7/

Salliesallow

Answer 4

Leave the max height off the css. Cache the height in a variable. Then add the max-height to 0 again.

$(function(){
    var divHeight = $('.div').height();
    $('.div').css('max-height', '0');
    alert(divHeight);
});

http://jsfiddle.net/AqAJc/4/

Threefold

Answer 5

Try this:

document.querySelector("#animated-max-height").style.setProperty("--visible-height", document.querySelector("#get-alway-visible-height").clientHeight + "px");
document.querySelector("#animated-max-height").style.setProperty("--content-height", document.querySelector("#animated-max-height").scrollHeight + "px");

#animated-max-height {
  max-height: var(--visible-height); 
  padding: 0px;
  transition: max-height 1s ease-out;
  overflow: hidden;
}

#animated-max-height:hover {
  max-height: var(--content-height); 
}

<div id="animated-max-height">
  <div id="get-alway-visible-height">Hover me</div>
  <div>Now you see me</div>
</div>

Maronite