html – I need to create a fixed header and footer for all pages

Question:

I'm a beginner in programming and I'm not able to insert a fixed header and footer on every page of the site. I saw an option here on the site with RenderBoy and RenderSection but I confess I didn't understand. The website in question is simple and has few pages. Is there a simple way to do this?

Answer:

This code fixes the header and footer.

CSS:

footer {
 width: 100%;
 position: fixed;
 bottom: 0;
 right: 0;
 background: black;
 color: white;
 height: 40px;
 display: flex;
}
header {
 width: 100%;
 position: fixed;
 top: 0;
 left: 0;
 color: white;
 background: black;
 height: 40px;

}

HTML:

<html>
 <body>
  <header>
   Este é o cabeçalho
  </header>
   este é o corpo
  <footer>
    Este é o rodapé
  </footer>
 </body>
</html>

The important CSS rules for the desired effect are:

position: fixed

top: 0 bottom: 0 right: 0 left: 0

They instruct the code to fix the elements and in what positions.

From there, it is easy to adapt to your case.

Scroll to Top