How to set Flex Fixed Header and Footers when the page scrolls

Normally I have a fixed header and footer by applying the following CSS and it has always worked without any problems.

Old Style that works fine:

<!doctype html>
<html> 
<head>
<title> Title goes here </title>
<style>
.pof {position: fixed; width:100%;}
.pob {left: 0;  bottom: 0;}
.pot {left: 0;  top: 0;}
</style>
</head>
<body>
  <div class="pof pot"> Header goes here </div>
  <div> content goes here </div>
  <div class="pof pot"> Footer goes here </div>
</body>
</html>

I decided to give Flex a try and had problems trying to get the correct header and footer heights displayed correctly. Also fixed positions did not do what I wanted them to do :frowning:

Flex test page:

<!DOCTYPE HTML>
<html lang="en">
<head>
<title> Flex Fixed Footer </title>
<style>
  /* Holy Grail Start */
  *     { box-sizing: border-box;}
  body  { margin: 0;  }
  #main { display: flex; min-height: calc(100vh - 15vh);}
  header, 
  footer {background: #eeeedf; height: 10vh;}
  footer {height: 5vh;}

  header, 
  nav, 
  footer, 
  article {padding: 0.88em;}
  #main > article {flex: 1;}
  #main > nav     {flex: 0 0 0; background: #efefef;}
  #main > nav     {order: -1; min-width: 12.45em; line-height:1.88;}
/* Holy Grail Finish */

.logo {
  height: 50px; width: 39px;
  opacity: 0.55;
  z-index: 0;
  border:0; outline:0;
}
.logo:hover {opacity:1.00;}
.fgr {color: #f00;}
.fll {float: left;} .flr {float: right;}
.fss {font-size: small;} .fs2 {font-size: 1.12em;}
.fsl {font-size: x-large; margin: 2.1em auto;}
.fwb {font-weight: 700;}
.ooo {margin: 0; padding: 0;}
.tac {text-align: center;}
</style>
</head>
<body>

<header class="tac">
  <div class="fll logo"> 
    <a href="#" title="Welcome message">
      Logo
    </a>  
  </div>  
  <h1 class="ooo tac dib"> 
    Title goes here
  </h1>
  <h4 class="ooo"> page: info </h4>  
</header>

<div id="main">
  <nav> 
    <dl class="menu-001">
      <dt>Menu </dt>
      <dd><a href="#"> One </a></dd>
      <dd><a href="#"> Two </a></dd>
      <dd><a href="#"> Three </a></dd>
      <dd> &nbsp; </dd>
      <dt> <a href="#"> welcome_message   </a> </dt>
      <dd> &nbsp; </dd>
    </dl>
    <div class="spc"> </div>
  </nav>

  <article>
    <h2 class="ooo"> Article content goes here </h2>
    <br>
    <dl>
      <dt class="ooo fwb fgr fsl">
        Fixed Flex Header &amp; Footer Required 
<sup class=""> pretty please </sup>
</dt>
      <dd class="fwb fgr"> I have tried but without success </dd>  
      <dd>  
        <p class="fsl"> Dummy text forces scroll page </p>  
        <p class="fsl"> Dummy text forces scroll page </p>  
        <p class="fsl"> Dummy text forces scroll page </p>  
        <p class="fsl"> Dummy text forces scroll page </p>  
        <p class="fsl"> Dummy text forces scroll page </p>  
        <p class="fsl"> Dummy text forces scroll page </p>  
        <p class="fsl"> Dummy text forces scroll page </p>  
        <p class="fsl"> Dummy text forces scroll page </p>  
        <p class="fsl"> Dummy text forces scroll page </p>  
      </dd>
    </dl>
  </article>
</div><!-- div id="main" -->
  
  <footer>
    <div class="tac">
      <b class="fll">
        <a href="https://validator.w3.org/nu/"> 
          HTML: Validator 
        </a>
      </b>
      <b class="flr"> 
        <a href="https://jigsaw.w3.org/css-validator">
          CSS: Validator
        </a>
      </b>

      Support: 
      <a 
        href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=6&ved=2ahUKEwjvwq2e0LHkAhVBRY8KHRwQAYwQFjAFegQIARAB&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGreta_Thunberg&usg=AOvVaw21NdejsloklvSuGIIpDL-U" 
        title="Greta Thunberg">
          Greta Thunberg 
       </a>
    </div>
  </footer>  
</body>
</html>

Rendered page:

Hi John,

I don’t see any fixed positioning in the last example?

Flex and position fixed have nothing in common!

If you want fixed positioning then use position fixed or sticky. Flex doesn’t have anything to do with it unless you were looking for a sticky footer?

I couldn’t test your code as out at the moment but back later this afternoon:)

Many thanks.

No wonder I could not get the sticky footer to work. I dread to think the number of permutations I tried.

I have not used sticky, perhaps that would work. I am tempted to just use the position fixed because it works ok.

I’ll throw up an example when I get back later.

The benefit of position sticky is that you don’t have to account for their heights unlike fixed positioning but you do need the right structure for them to work.

Here it is:

https://codepen.io/paulobrien/full/PoYXQyZ

That’s very rough and you should of course build some media queries for small screen etc.

Many thanks, that works a treat.

During development I have two dynamic links in the footer to w3,org HTML and CSS validation web-pages - it was annoying to keep scrolling to the bottom of the page to show the links and validate changes.

1 Like