How to set footer at bottom of a page?

Question

I have a footer shown below that shows up on all pages, I want that footer to stay at the bottom of the webpage content, and in case the content does not overflow the height of the viewport, I want this footer to stay at the bottom of the viewport. How do I achieve this?

Also would be nice if I could make this compatible or not screwy with a phone-like viewport

I also don't want the position to be fixed cause this just causes the footer to stay at the bottom of my screen even as I scroll.

#footer {
width: 100vw;
min-height: 15vh;

background-color: var(--blue-black);
color: white;
display: table;
}

<div id="footer">
  <div id="footer-content-table">
    <div class="footer-box contact-us">
      <div class="footer-box-title">
        Contact Us
      </div>
      <div id="footer-contacts-list">
        <a class="footer-contact" href="www.secretish.com">
          <img src="/logo" alt="Our logo">
        </a>
      </div>
    </div>
    <div class="footer-box other-links">
      <div class="footer-box-title">
        Other Links
      </div>
      <div id="footer-links-list">
        <a href="/about" class="footer-link">About Us</a>
        <a href="/report" class="footer-link">Report a Problem</a>
      </div>
    </div>
  </div>
  <div id="footer-credit">Powered by bleep of bleep</div>
</div>

This was a lot closer to a fix except in pages that fit the viewport height - it still stayed sort of in the center of the page and not at the absolute bottom. I'm going to try and mess with this though — zeehyt, Feb 01 '22 at 22:00

Roko C. Buljan · Accepted Answer · 2022-02-01T22:08:19.157

Keep footer ideally at page bottom (unless pushed by content)

Use a parent element (i.e: body) set to display: flex;
Use a main element set to Flex Grow set to 1

/* QuickReset */ * {margin: 0; box-sizing: border-box;}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.layout-main {
  flex-grow: 1;
}

.layout-footer {
  background: gold;
}

<main class="layout-main">
  Some short Main content
</main>
<footer class="layout-footer">
  I will stay ideally in the bottom when not enough content in Main
</footer>

and here's an example with a tall text inside the Main element:

/* QuickReset */ * {margin: 0; box-sizing: border-box;}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.layout-main {
  flex-grow: 1;
}

.layout-footer {
  background: gold;
}

<main class="layout-main">
  <p style="height: 200vh">Some looong Main content.... (Scroll down)</p>
</main>
<footer class="layout-footer">
  I will stay ideally in the bottom when not enough content in Main
</footer>

I had a feeling that separating the content was the key, thanks for proving me right - cheers! — zeehyt, Feb 01 '22 at 22:07

How to set footer at bottom of a page?

1 Answers1

Keep footer ideally at page bottom (unless pushed by content)