How to Make a Sticky Footer Using Css

How to make a sticky footer using CSS?

Following a clean method implemented from an online source no longer available (dead link), the minimum code you should need for your page would be (note - probably best to use #bottom-footer instead of footer #bottom-footer for the selection of your footer - that could be part of the issue):

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

How to create a sticky footer that works with mobile and desktop?

The reason why is because it's positioning it absolute based on the height of the window, not your content.

What you need to do is add a media query for mobile. Something like:

@media screen and (max-width: 1024px){
  body{
   margin-bottom: 0;
  }
  .footer {
    position: relative;
  }
}

How can I have a sticky footer with my CSS Grid layout?

Here is a CSS Grid solution, but it's far better using a class for the target.

Using grid-areas this will be very straight forward:

html, body {
    margin: 0;
    height: 100%;
}
body {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "main" "footer";
    grid-template-rows: 100px 1fr 80px;
}
nav {
    background-color: #7E57C2;
    grid-area: nav;
}
main {
    background-color: #F8BBD0;
    grid-area: main;
}
footer {
    background-color: #7E57C2;
    grid-area: footer;
}

<body>
    <nav>Some navigation buttons</nav>
    <main>The content</main>
    <footer>Copyrights and stuff</footer>
</body>

HTML, CSS sticky footer (growing content)

By using absolute, the footer and mainContainer are subject to where you put them. If you use absolute and set the footer to the bottom, it will just stick to the bottom of the viewport.

For sticky, you should use relative units and the correct heights where needed.

html, body { width:100%; height:100%; }
#wrap { 
min-height:100%;
height:auto !important;
height:100%;    
margin: 0 auto -158px;  /* Bottom value must = footer height */
}

.pagefooter, .push { width:100%; height:158px; position:relative; bottom:0; }

The order goes

 <div id="wrap">
 <!--All of your content goes here-->
 <div class="push"></div>
 </div>
 <div class="pagefooter"></div>

That way, the footer always has enough room and is set to the bottom. margin:auto inside the wrap will center the wrap (so as long as it isn't width:100%, it will center without the inline)

How to get sticky footer on every page

Try this:

#page {
    min-height: 100vh;
    position: relative;
}

footer {
    bottom: 0;
    position: absolute;
}

How to Make a Sticky Footer Using Css