CSS fix footer to bottom of page.

For as long as I can remember, using CSS to fix the footer to the bottom of the page has always been an issue. Today in this blog I will show you how to make a sticky footer that works on all devices I have tested on.

Requirements

CSS3

Bootstrap 4.4.1

When we create a webpage, if we have very little text, you will find that the footer moves up the page, as you have clicked through to this webpage then I take it this is an issue for you.

In the past, we have used position absolute, footer position absolute and gave the footer a fixed height (which is not good really).

But with a bit of CSS3 magic, using Flexbox, we can position the footer to the bottom of the page. 

CSS fix footer to bottom of page.

Thank you for reading this blog about using CSS to position the footer at the bottom of the page, I hope you found it helpful. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>BlogWebsite</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/Navigation-Clean.css">
    <link rel="stylesheet" href="/mainStyle.css">
    <link rel="stylesheet" href="/SiteFooter.css">
</head>
<body itemscope="" itemtype="http://schema.org/WebPage">
    <header id="primaryHeader">
        <nav class="navbar navbar-light navbar-expand-lg navigation-clean-search">
            <div class="container"><a class="navbar-brand text-white" href="#"><img src="/intuWebDesign3_crop.jpg" width="250"></a></div>
        </nav>
    </header>
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>I'm the body text</h1>
            </div>
        </div>
    </div>
    <footer class="page-footer mt-auto">
        <h1 class="text-center text-white">I'm the footer</h1>
    </footer>
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
   </script>
</body>
</html>

html, body {
  background-color: #f0f0f0;
  color: rgb(65,78,87);
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

#primaryHeader {
  background-color: rgb(65,78,87);
}

.primary-header-image {
  position: relative;
  top: 0;
}
.page-footer {
  background-color: #414e57;
  padding-top: 50px;
  padding-bottom: 10px;
}

Footer IPad

CSS footer Ipad

Footer IE11

CSS footer IE11