CSS Layout: Footer at bottom OR end of page (if further down) : <p>I know, this kind of questions has been asked a lot, but somehow the correct answer is always eluding me...</p>

<p>Ok, I've got two things I want:</p>

<ul>
<li>A footer that's always on the bottom of the page, no matter if the content has less height than the available screen or more.</li>
<li>The content above the footer should fill the rest of the screen - or use more space, if needed</li>
</ul>

<p>The first part is quite easy, for example, <a href="https://codepen.io/cbracco/pen/zekgx" rel="nofollow noreferrer">here</a>, with something like this...</p>

<pre><code>.footer {
  position: absolute;
  bottom: 0;
  left: 0;
}
</code></pre>

<p>No problem there. But how can I get the content above the <code>.footer</code> element to fill the remaining space? <code>height=100%;</code> obviously doesn't work;</p>

<p>Anyone got an idea how to realize a layout with...</p>

<ul>
<li>A fixed header</li>
<li>A footer at the bottom of the screen (or below, if the content needs more height than that)</li>
<li>A content that fills the available screen or uses more, if needed</li>
</ul>

<p>(The reason is that in the end, I want a grid with flexible height that fills the screen in the content)</p>
