title: How to calculate height in pixel according to content if set as 0px in css?
body: <p>I gave height of <code>0px</code> to an element as shown below</p>
  
  <pre><code>#sample{
      height: 0px;
      overflow: hidden;
      transition-duration: 1.2s;
  }
  
  &lt;div id="sample"&gt;
      &lt;h1&gt;Hello World main headinh&lt;/h1&gt;
      &lt;h2&gt;Hello World sub heading&lt;/h2&gt;
      &lt;p&gt;Hello world paragraph&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I'd not specified height so it will take height of content (say 50px). Now initially I dont know the height of <code>#sample</code>. I want to set its height to its original calculated height (i.e. 50px), I can do it by giving height <code>100%</code>. </p>
  
  <pre><code>document.getElementById("sample").style.height = "100%";
  </code></pre>
  
  <p>But <code>transition-duration</code> property is not working in that case, so when I change percent into pixel so <code>transition-duration</code> property worked well.</p>
  
  <pre><code>document.getElementById("sample").style.height = "50px";
  </code></pre>
  
  <p><b>But problem here is the content inside the <code>div</code> is dyanamic, so its height is changing too.</b></p>
  
  <p>So how can I give height to the <code>#sample</code> in pixel as much as that content need.
  Solution should only have <code>Javascript</code> not any other framework like <code>JQuery</code>.</p>