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:

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 ></div>
<footer>
    <div>
        <p>Links</p>
        <a href="https://status.example.com" target="_blank">Status</a>
    </div>
    <div>
        <hr>
        <h1>Text</h1>
    </div>
</footer>

CodePudding user response：

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 >
  <header>Header / Navbar</header>
  <main>Main Content</main>
</div>
<footer>Footer</footer>

CodePudding user response：

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.