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:
Have a
<div>
withclass="wrapper"
for your content.Right before the closing
</div>
of thewrapper
place the<div class="push"></div>
.Right after the closing
</div>
of thewrapper
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;
.
document.getElementById('add').addEventListener('click', e => {
document.getElementById('content').innerHTML += '<br />content<br />content<br />content';
});
html,
body {
margin: 0;
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.footer {
background: #999;
flex-shrink: 0;
}
<body>
<div class="content">
<button id="add">Add Content</button>
<p id="content">content</p>
</div>
<footer class="footer">footer</footer>
</body>
Related Topics
Add Footer Text in Each Page of Pdf Using CSS
Canvas Has White Space At the Bottom and Scrolls Too Far
Media Queries: How to Target Desktop, Tablet, and Mobile
Hiding the Scroll Bar on an HTML Page
Css Selector That Applies to Elements With Two Classes
Why Does the Order of Media Queries Matter in Css
How to Set Bullet Colors in Ul/Li HTML Lists Via CSS Without Using Any Images or Span Tags
Css 3 Slide-In from Left Transition
Amazon S3 Cors (Cross-Origin Resource Sharing) and Firefox Cross-Domain Font Loading
How to Remove Border of Drop Down List:Css
How to Prevent Long Words from Breaking My Div
How to Apply a CSS Filter to a Background Image
How to Remove the Stripes That Appears When Using Linear Gradient Property
Using CSS to Affect Div Style Inside Iframe
Is Quoting the Value of Url() Really Necessary
Make Div Stay At Bottom of Page'S Content All the Time Even When There Are Scrollbars