title: CSS :- Dynamically compute header's height and then place elements below it
body: <p>I want to keep my header fixed in place like this:
  <a href="https://i.stack.imgur.com/SxsC6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SxsC6.png" alt="enter image description here" /></a></p>
  <p>And then I want to add the body content below the header:</p>
  <pre><code>&lt;div&gt;
        &lt;Header /&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;div style={{ color: 'red', zIndex: 101 }}&gt;Hello World&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>However in order to keep this responsive, I can't just go with some manual calculation like <code>marginTop: '10rem'</code> as based on different screen sizes it may vary. I want to know what's the best way around to deal with this?</p>
  <p>Here's how I have styled my header:</p>
  <pre><code>.Header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: $light-bg;
    box-shadow: -4px 4px 10px 7px rgba(0, 0, 0, 0.25);
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation-duration: $background-animation-duration;
    animation-name: animateFadeEffectLight;
    animation-timing-function: ease-in;
    &amp;_dark {
      background: $toggle-switch-color-dark;
      animation-duration: $background-animation-duration;
      animation-name: animateFadeEffectDark;
      animation-timing-function: ease-in;
    }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/8qRHo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8qRHo.png" alt="enter image description here" /></a></p>
  <p>Here's how my layout looks like:</p>
  <pre><code> &lt;div&gt;
        &lt;Header /&gt;
  
        &lt;div style={{ color: 'red', zIndex: 101 }}&gt;Hello World&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>