How to calculate height in pixel according to content if set as 0px in css?

Question

I gave height of 0px to an element as shown below

#sample{
    height: 0px;
    overflow: hidden;
    transition-duration: 1.2s;
}

<div id="sample">
    <h1>Hello World main headinh</h1>
    <h2>Hello World sub heading</h2>
    <p>Hello world paragraph</p>
</div>

If I'd not specified height so it will take height of content (say 50px). Now initially I dont know the height of #sample. I want to set its height to its original calculated height (i.e. 50px), I can do it by giving height 100%.

document.getElementById("sample").style.height = "100%";

But transition-duration property is not working in that case, so when I change percent into pixel so transition-duration property worked well.

document.getElementById("sample").style.height = "50px";

But problem here is the content inside the div is dyanamic, so its height is changing too.

So how can I give height to the #sample in pixel as much as that content need. Solution should only have Javascript not any other framework like JQuery.

Answer 1

If you're wanting to animate the height, what you want to do is start out by setting max-height: 0, and then transition the max-height by changing a class and adding a transition or setting an animation, such that max-height: 500px or some value that's definitely bigger than the content inside will be.

EDIT: This might not be exactly what you're doing, but here is a decent example: https://davidwalsh.name/css-slide

Answer 2

try this.

var element = document.getElementById('sample');
element.style.height= element.scrollHeight+"px"

https://jsfiddle.net/y0g22540/

Answer 3

Percentage heights will only work when the parent element has had its height set (you can't have a percentage of something that hasn't had its height set).

However, you can set the height back to its original value using scrollHeight.

// Get references to the elements:
var btn = document.getElementById("show");
var sample = document.getElementById("sample");

// Set up an event handler to trigger the code:
btn.addEventListener("click", function(){
  // Set the height to the height of the element's content:
  sample.style.height = sample.scrollHeight + "px";
  
  // Just for testing purposes:
  console.log(sample.style.height);
});

#sample{
    height: 0px;
    overflow: hidden;
    transition-duration: 1.2s;
}

<button id="show">Show</button>
<div id="sample">
    <h1>Hello World main headinh</h1>
    <h2>Hello World sub heading</h2>
    <p>Hello world paragraph</p>
</div>

Answer 4

If you just want to show and hide shrinking or expanding the width and height then here it is and example that will point you in that direction!

#click:checked ~ #sample{  
   -webkit-transform: scale(1);
     -moz-transform: scale(1);
          transform: scale(1);   
}
#sample{
    overflow: hidden;
    -webkit-transition: transform 0.125s;
       -moz-transition: transform 0.125s;
            transition: transform 0.125s;
  
  -webkit-transform: scale(0);
     -moz-transform: scale(0);
          transform: scale(0);
}

<input type="checkbox" id="click"/>
<label for="click"> Click me </label>

<div id="sample">
    <h1>Hello World main headinh</h1>
    <h2>Hello World sub heading</h2>
    <p>Hello world paragraph</p>
</div>

Answer 5

You could use a wrapper inside the div, and read its height.

document.getElementById('toggle').onclick = function() {

  const sample = document.getElementById("sample");
  const wrapper = sample.getElementsByClassName('wrapper');

  if (parseInt(sample.style.height) > 0) {
    sample.style.height = 0;

  } else {

    const style = window.getComputedStyle(wrapper[0], null);
    const height = style.getPropertyValue("height");


    sample.style.height = height;


  }



};

#sample {
  height: 0px;
  overflow: hidden;
  transition-duration: 1.2s;
}

<div id="sample">
  <div class="wrapper">
    <h1>Hello World main headinh</h1>
    <h2>Hello World sub heading</h2>
    <p>Hello world paragraph</p>
  </div>
</div>

<button id="toggle">Toggle</button>

Answer 6

I think what you want is

var s = document.getElementById('sample');
s.style.height = s.offsetHeight + 'px';

P.S. It should be noted that offsetHeight includes vertical padding and borders. And is rounded to an integer.
More info at: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

Answer 7

You can use JS to get the height and height of an html tag.

var example = document.getElementById("yourTag").offsetHeight;

Then you can do:

document.getElementById("sample").style.height = example;