Keeping the Footer at the Bottom of the page

Question

I'm working on a project and I'm trying to get the footer to stay at the bottom of the page but out of sight until you scroll to the bottom of the page. I tried using a 'position: fixed' in my CSS but it floats above my content, for absolute it stuck to the middle of the page and covered content. Also, for pages without much content when I don't specify the position or I use 'position: absolute', there is whitespace below the footer. Please provide suggestions.

* {
  margin: 0;
  padding: 0;
 }

header {
  background-color: gray;
}

footer {
  background-color: gray;
  bottom: 0;
  height: 20px;
  position: fixed;
  width: 100%;
}

/* when I use the fixed position, the footer is fixed above my content. What I want is for the footer to remain at the bottom of the page but out of sight. */
<html>
 <body>
  <header>Heading</header>
  <main>
    <h1>Heading</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci eos deserunt fugiat doloremque     your text`ut.</p>
  </main>
  <footer>&copy; Copyright, Business</footer>
</body>
</html>

Hello, something I don't totally understand. You want footer to be always visible on screen or not? If not, footer at end of page, when scroll, at a point you see the footer. But if on top of page footer out of view, right? — pier farrugia, Nov 23 '22 at 08:59
If you want it to stay at the bottom of the page, isn't that what it already does by default, if it's the last item on the page. Maybe you should reword your question — Joshua, Nov 23 '22 at 09:01
@Joshua as I said in my question, for pages with less content the footer does not stay at the bottom. There is space below it. — haadi, Nov 23 '22 at 09:03

score 1 · Answer 1 · answered Nov 23 '22 at 09:09

I think you can add a parent div to it, and the parent div has the same width and height as it。 html:

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 200px;
  background-color: red;
}
.footer-container {
  height: 200px;
  width: 100vw;
}

<div class="footer-container">
  <div class="footer"></div>
</div>

score 1 · Answer 2 · answered Nov 23 '22 at 09:10

if I understand well

* {
  margin: 0;
  padding: 0;
}

header {
  background-color: gray;
}

main {
  min-height: 100vh;
}

footer {
  background-color: gray;
  bottom: 0;
  height: 20px;
  width: 100%;
}

<header>Heading</header>
<main>
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci eos deserunt fugiat doloremque your text`ut.</p>
</main>
<footer>&copy; Copyright, Business</footer>

no need to have fixed for footer. Normal flow put footer at the end of document.

min height on main put footer outside of view when on top of page

score 1 · Answer 3 · answered Nov 23 '22 at 09:21

I am using

html,body{
  width: 100%;
  height: 100%;
}
body{
  display: flex;
  flex-direction: column;
}
body main{
  flex-grow: 1;
  overflow: auto;
}

Removed below code from the footer section.

position: fixed

Now main section is taking the available space that viewport. Also if main section content are too long it will be overflow if needed.

score 1 · Answer 4 · answered Nov 23 '22 at 09:35

You can make to footer to stay at the bottom of the page but putting your footer and the content in a same div. Then set the position of the div as relative and make the footer position:absolute. As already footer has bottom:0 attribute, it will stick at the bottom and to view the footer you have to scroll down.

  
  <html>
    <style>
        * {
            margin: 0;
            padding: 0;
           }
          
          header {
            background-color: gray;
          }
          
          footer {
            background-color: gray;
            position: absolute;
            bottom: 0;
            height: 20px;
            
            width: 100%;
          }
          .container{
            height: 1000px;
            position: relative;
          }
          
    </style>
   <body>
    <header>Heading</header>
    <main>
      <div class="container">
        <div class="content">
            <h1>Heading</h1>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci eos deserunt fugiat doloremque     your text`ut.</p>
            <h1>Heading</h1>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci eos deserunt fugiat doloremque     your text`ut.</p>

        </div>



        <div>
            <footer>&copy; Copyright, Business</footer>
        </div>
      </div>
      
    </main>
  </body>
  </html>

score 0 · Answer 5 · answered Nov 23 '22 at 09:23

You could use a display: table-footer-group in a display:table container (body).

By setting min-height: 100vh to the body, your footer will always stay on bottom without hiding last elements.

* {
  margin: 0;
  padding: 0;
}

body {
  display: table;
  min-height: 100vh;
  width: 100%;
}

header {
  background-color: gray;
}

footer {
  background-color: gray;
  height: 20px;
  width: 100%;
  display: table-footer-group;
}

#big-content {
  height: 2000px;
  align-items: end;
  display: none;
}

input:checked+#big-content {
  display: flex;
}

<header>Heading</header>
<main>
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci eos deserunt fugiat doloremque your text`ut.</p>
  <label for="more-content">More content</label>
  <input id="more-content" type="checkbox">
  <div id="big-content">end of big content</div>
</main>
<footer>&copy; Copyright, Business</footer>

Keeping the Footer at the Bottom of the page

5 Answers5