How to Get the Footer to Stay At the Bottom of a Web Page

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;
}

How to make footer stay at bottom of web page

You can use sticky footer located here https://getbootstrap.com/examples/sticky-footer/ or at https://codepen.io/elmahdim/pen/Djlax. In addition you can also use navbar-fixed-bottom


USING STICKY FOOTER GET HERE https://jsfiddle.net/aice09/zy1x2svg/1/

index.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://getbootstrap.com/favicon.ico">
<title>Sticky Footer</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="sticky-footer.css" rel="stylesheet">
</head>

<body>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Use the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
</body>

</html>

sticky-footer.css

/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .text-muted {
margin: 20px 0;
}

USING NAVBAR_FIXED_BOTTOM

<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>

How to keep footer at bottom of screen

What you’re looking for is the CSS Sticky Footer.

* {  margin: 0;  padding: 0;}
html,body { height: 100%;}
#wrap { min-height: 100%;}
#main { overflow: auto; padding-bottom: 180px; /* must be same height as the footer */}
#footer { position: relative; margin-top: -180px; /* negative value of footer height */ height: 180px; clear: both; background-color: red;}

/* Opera Fix thanks to Maleika (Kohoutec) */
body:before { content: ""; height: 100%; float: left; width: 0; margin-top: -32767px; /* thank you Erik J - negate effect of float*/}
<div id="wrap">  <div id="main"></div></div>
<div id="footer"></div>

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

To get a sticky footer:

  1. Have a <div> with class="wrapper" for your content.

  2. Right before the closing </div> of the wrapper place the
    <div class="push"></div>.

  3. 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 get footer to stay at the bottom of the page

So the col-3 class on your sidebar is adding a 15px padding to the left and right sides of the node parenting your sticky footer. The top-left corner of the footer starts inside the padding, which is clearly not what you want.

The simplest solution, albeit a little janky, is to offset the padding by using a negative margin on your footer. Using a negative margin will help you position in a relative fashion on an absolutely-positioned element. That would look like:

...

footer {
margin: 40px 0 40px -15px;
font-size: 14px;
width: 100%;
text-align: center;
position: absolute;
background-color: red;
}

...

These types of layouts are exactly what CSS grids were designed for, so if you have the flexibility to explore CSS grids, I would do so. You can find documentation on CSS grids here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

How to make the footer always at the bottom

Try flex-direction: column;.