title: How can I get the height of an element using css only
body: <p>We have a lot of options to get the height of an element using jQuery and JavaScript.</p>
  
  <p>But how can we get the height using CSS only?</p>
  
  <p>Suppose, I have a div with dynamic content - so it does not have a fixed height:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dynamic-height {
     color: #000;
     font-size: 12px;
     height: auto;
     text-align: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='dynamic-height'&gt;
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to set the <code>margin-top</code> of <code>.dynamic-height</code> to a value which is equal to <code>(the height of the div - 10px)</code> using CSS only. </p>
  
  <p>If I get the height I can use CSS <code>calc()</code> function.</p>
  
  <p>How do I do that?</p>