Make Footer Stick to Bottom of Page Correctly

How do you get the footer to stay at the bottom of a Web page?

To get a sticky footer:

Have a <div> with class="wrapper" for your content.
Right before the closing </div> of the wrapper place the
<div class="push"></div>.
Right after the closing </div> of the wrapper place the
<div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

How to stick a footer to bottom in css?

Try setting the styles of your footer to position:absolute; and bottom:0;.

Make footer sticky to bottom but not screen?

Quite easy: make html and body 100% height, your container (anything that has to be in the initial viewport) as well. Position the container relatively, the footer absolute, and put anything below.

Example on JSFiddle

Code

<style type="text/css">
    html, body { height: 100%; }

    #container { position: relative; 
        /* updated to support footer push */
        min-height: 100%;
        padding-bottom: 60px; /* must be the same as footer height */
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    #below { height: 500px; } /* or no height, or whatever */

    footer { position: absolute; bottom: 0; height: 60px; width: 100%; } /* as it's absolute, you should give it a specific height, or let it be as wide as its content */
</style>

<div id="container">
    <footer>F-F-F-F-F-FOOTER!</footer>
</div>
<div id="below"></div>

Edit see the edited code above; min-height instead of height for the container to let it be able to stretch, but at least be as high as the screen. You'll have to add a bottom padding too, as high as the footer, to prevent the footer from overlapping your content. And also add box-sizing: border-box, otherwise the padding will add up to the height, resulting in the footer to be pushed down the initial viewport.

(For history's sake, here is the original fiddle)

How to make the footer stick to the bottom of the page and centered in Bootstrap?

The simple way is to use flexbox on the BODY or some wrapper element. Then use mt-auto to push the footer to the bottom of the page.

<body class="d-flex flex-column min-vh-100">
  <div class="container">Other page content..</div>
  <div class="footer mt-auto text-center">
    <span id="bottom"> 
        <hr>
        <p>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-facebook"></i></a>
       </p>
    </span>
  </div>
</body>

https://codeply.com/p/prWsoALtSD

Also see: Bootstrap 4 Sticky Footer Not Sticking

Sticking custom footer on each page to bottom while printing

Finally found an answer:

html,body MUST HAVE height: 100%;
There should be two types of div: outside (size of page), footer
For both set display: block;
For the outside set height: 100%; position: relative;
For the inside set position: absolute; bottom: 0px;

Voila!

Here is my complete code:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <style>
        html,body
        {
            height: 100%;
            margin: 0px;
        }
        body > div
        {
            height: 100%;
            display: block;
            position: relative;
        }
        body > div > div
        {
            position: absolute;
            bottom: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div>
        Page1
        <div>Page1Footer</div>
    </div>
    <div>
        Page2
        <div>Page2Footer</div>
    </div>
    <div>
        Page3
        <div>Page3Footer</div>
    </div>
</body>
</html>

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

Give the footer a negative margin-top:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

Sticky footer not working correctly with sidebar

You can remove width from footer and add right: 0.

footer {
    bottom: 0;
    margin-left: inherit;
    height: 100px;
    left: 0;
    position: absolute;
    background-color: lightgrey;
    right: 0;
}

How to make a footer fixed at bottom?

You can use new properties and values from CSS3.

For instance :

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

For the CSS :

.container {
    min-height: 90vh;
}

.footer {
    height: 10vh;
}

This way, your footer will always be at the bottom, even if your container is null