Home How to avoid the sticky header and footer overlapping with the content in HTML and CSS?

Questions

How to avoid the sticky header and footer overlapping with the content in HTML and CSS?

December 14, 2022

I know this might be silly but I am facing this issue when I am trying to follow the semantic way. I need to have a sticky header and footer and the main content be scrollable. When I followed some tuts and trying to build on own, I am facing this issue and not able to come out of it.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

header,
footer {
  position: fixed;
  width: 100%;
  min-height: 100%;
}

header {
  top: 0;
  bottom: auto;
}

footer {
  top: auto;
  bottom: 0;
}

main {
  position: relative;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Benazir Beauty</title>
  </head>
  <body>
    <header>Header</header>
    <main>
      Main
    </main>
    <footer>Footer</footer>
  </body>
</html>

>Solution :

You can use flex and give the main block all the space not used by the footer and header.

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

.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header,
footer {
  background-color: #ddddff;
}

main {
  flex: 1;
  overflow: auto;
  background: #ddffdd;
}
 
main p {
  /* force a scroll */
  height: 8rem;
}

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Benazir Beauty</title>
</head>

<body>
  <div class="page-container">
    <header>Header</header>
    <main>
      Main
      <div> Some large content to scroll through!
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
      </div>
    </main>
    <footer>Footer</footer>
  </div>
</body>

bigger header/footer: bigger and some more

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

.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  align-self: center;
  font-size: 5rem;
}

footer {
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 2rem;
  font-size: 1.4rem;
}

header,
footer {
  background-color: #ddddff;
}

main {
  flex: 1;
  overflow: auto;
  background: #ddffdd;
}

main p {
  /* force a scroll */
  height: 8rem;
}

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Benazir Beauty</title>
</head>

<body>
  <div class="page-container">
    <header>Header</header>
    <main>
      Main
      <div> Some large content to scroll through!
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
      </div>
    </main>
    <footer>
      <div>Footer</div>
      <div>Copyright: none use me all day</div>
      <div>Joe was here</div>
    </footer>
  </div>
</body>