Question 278211 in CSS Question posted in
Some basic documentation can be found here.

Css – Make footer stay always out of view at the bottom of page

I want to create a footer that always stays at the bottom of the page but also out of view, meaning that if the user doesn’t scroll, it shouldn’t be visible even when the page content is not enough to push it down enough.

Here’s a quick illustration:
enter image description here

I tried searching online but there was no asnwer to this specific case.

html, body {
    height: 100%;
}

.content-area {
    --sidebar-width: calc(2rem + 35px);
    margin-left: calc(var(--sidebar-width) + 2rem);
    width: calc(100% - var(--sidebar-width) - 4rem);
    position: relative;
    top: calc(5rem + 1px + 2rem);
}

footer {
    background-color: var(--light-black);
    margin: 0;
    width: calc(100% - var(--sidebar-width));
    min-height: 15rem;
    height: fit-content;
    position: absolute;
    left: var(--sidebar-width);
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "section section section"
        "branding branding branding";
}

<div class="content-area"></div>
<footer>
    <div>
        <p>Links</p>
        <a href="https://status.example.com" target="_blank">Status</a>
    </div>
    <div>
        <hr>
        <h1>Text</h1>
    </div>
</footer>
Tags:

2

Answers


  1. 0

    I think you should apply position:absolute to Footer.

    Set footer’s style like below.

    body {
  ....
  min-height: 100vh;
  margin: 0px;
  box-sizing: border-box;      
}

.footer {
  position: absolute;
  bottom: 0;
  ....
}

    I hope this will help you.

    Login or Signup to reply.
  2. 0

    Quite easily doable by wrappign all content with exception of the footer in a container. Then simply apply min-height: 100vh to that wrapping container and the footer will by default stay out of vieport unless you scrolled down.

    body {
  margin: 0;
}

.wrapper {
  min-height: 100vh;
}
    <div class="wrapper">
  <header>Header / Navbar</header>
  <main>Main Content</main>
</div>
<footer>Footer</footer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search