title: SCSS (or CSS) layout with dynamic height header and main content below
body: <pre><code>+-------------------+
  |    Top (dynamic)  |
  +-------------------+
  |                   |
  |                   |
  |    Main content   |
  |                   |
  |                   |
  |                   |
  |                   |
  +-------------------+
  </code></pre>
  <p>My <strong>header</strong> is an element with variable height, varying according to the content inside. This header must be fixed on the top.</p>
  <p>When the user scrolls down, the <strong>header</strong> changes and decreases the size and gets a fixed height.</p>
  <p>When i add the <code>position: fixed</code> style in the <strong>header</strong>, the <strong>main</strong> content goes up and the <strong>header</strong> loses the vertical space (so, the <strong>main</strong> content goes behind the <strong>header</strong>). In normal cases, I could add a <strong>header</strong> size margin and this space would be filled again, however, here the height is dynamic.</p>
  <p>I need the <strong>main</strong> to remain in the same place as if the <strong>header</strong> was not with <code>position: fixed</code>.</p>