title: how to make a scrollable div's height, dynamic?
body: <p>I'm trying to build a section with defined height. in this section there is a sticky header (that its height may increase) and a body. what i want is to make the body scrollable. but because of header's dynamic height, i can't give it an exact height!! what should i do??</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;section&quot;&gt;
      &lt;div class=&quot;header&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;body&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.section{
      height: 100vh;
      overflow: hidden;   
      position: relative;
  }
  .header{
      position: sticky;
      top: 0;
      background: #fff;
      z-index: 2;
  }
  .body{
      // height: ???;
      overflow-y: auto
  }
  </code></pre>
  <p>I can give the section <code>overlfow-y: auto</code> but it will show the scroll in whole section (even in header) but i only want the body be scrollable and the whole section height must be the window height (<code>100vh</code>)</p>