3 Pane layout using flex css with header staying always on top even on page scroll

Question

I am trying to have a 3 pane layout for my web page. The header would always stay on top even on page scroll and will have a fixed height.

The footer will have a fixed height and would stay on bottom but will not be fixed to view port's bottom whenever page is scrolled, I mean if the center area content exceeds in height, footer can move down and not stick to view port bottom.

The middle content area will adjust itself automatically upon window resize so that it takes on all the remaining left over space fully.

Better if this is done with flex CSS or fine if some other approach is good. I have tried it myself with flex but if the center area's content is varying in height then upon window resize whole layout behaves weird. See attached pic for a rough idea.

Please if you answer this question, do provide some working fiddle.

Answer 1

Header = Known height and sticky
Content = Variable height
Footer = Known height and at bottom (if Content grows than stick to content)

use CSS calc

html, body{ height:100%; margin:0;}

header{
  position: fixed;
  z-index:10;
  top:0;
  height:50px;
  width:100%;
  background: hsl(0, 80%, 70%);
}

main{
  position:relative;
  padding-top: 50px; /* header height */
  min-height: calc(100vh - 80px); /* 100vh - header - footer */
  background: hsl(150, 80%, 70%);
}

footer{
  position:relative;
  height:30px;
  background: hsl(200, 80%, 70%);
}

<header>This is header 50px</header>
<main>Main content calc px (addd long content and footer will follow)</main>
<footer>Footer 30px</footer>