Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway.
I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of its container to fix to the bottom using some of those examples right there.
Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a <section id="footer"> div anyway.
I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend.
Live URL - http://www.mangdevelopment.co.uk/nakedradish
(It's a resturant website. Don't worry about the word 'naked').
HTML
<section id="footer">
<div class="container">
<div class="row">
<div class="span1">
<div id="small-logo">
<img src="img/small-logo.png" />
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>OUR BOXES</h6>
<ul>
<a href="#">
<li>Classic Box</li>
</a>
<a href="#">
<li>Vegetarian Box</li>
</a>
<a href="#">
<li>Family Box</li>
</a>
<a href="#">
<li>Dinner Party Box</li>
</a>
<a href="#">
<li>Gift Box</li>
</a>
</ul>
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>OUR RECIPES</h6>
<ul>
<a href="#">
<li>Last Weeks Feature</li>
</a>
<a href="#">
<li>Next Weeks Feature</li>
</a>
</ul>
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>ABOUT US</h6>
<ul>
<a href="#">
<li>The Food</li>
</a>
<a href="#">
<li>How We Sourcex</li>
</a>
<a href="#">
<li>Sustainability</li>
</a>
<li><a href="about.html">About Us</a></li>
<a href="#">
<li>Contact Us</li>
</a>
</ul>
</div>
</div>
<div class="span5">
<div id="twitter">
<img src="img/twitter-logo.png" alt="" title="" height="50" width="50" class="twitter-logo" />
<div class="tweet-bg">
<div class="tweets">
<p>@chefallanp that's just not on really</p>
</div>
<div id="follow-btn">
<img src="img/follow-us.jpg" />
</div>
</div>
</div>
<div class="checkout-options">
<h6>SECURE CHECKOUT</h6>
<ul>
<li><img src="img/solo-logo.png" /></li>
<li><img src="img/switch-logo.png" /></li>
<li><img src="img/maestro-logo.png" /></li>
<li><img src="img/visa-logo.png" /></li>
<a href="#">
<li><img src="img/facebook-logo.png" /></li>
</a>
<a href="#">
<li><img src="img/twitter-logo-flat.png" /></li>
</a>
</ul>
</div>
</div>
</div>
</div>
<div id="copyright-bar">
<div class="container">
<div class="row">
<div class="copyright-content">
<div class="span4">
<p>The Naked Radish Limited. 2013 All rights reserved.</p>
</div>
<div class="span4 offset4">
<div class="copyright-list">
<ul>
<a href="terms.html">
<li>Terms & Conditions</li>
</a>
<a href="privacy.html">
<li> - Privacy Policy</li>
</a>
<a href="#">
<li> - Cookie Policy</li>
</a>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
CSS:
#footer {
background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
}
Set
html, body {
height: 100%;
}
Wrap the entire content before the footer in a div.
.wrapper {
height:auto !important;
min-height:100%;
}
You can adjust min-height as you like based on how much of the footer you want to show in the bottom of the browser window. If set it to 90%, 10% of the footer will show before scrolling.
Here's a simple CSS solution that'll work:
#fix-footer{
position: fixed;
left: 0px;
bottom: 0px;
height: 35px;
width: 100%;
background: #1abc9c;
}
We can use FlexBox for Sticky Footer and Header without using POSITIONS in CSS.
.container {_x000D_
display: flex;_x000D_
flex-direction: column;_x000D_
height: 100vh;_x000D_
}_x000D_
_x000D_
header {_x000D_
height: 50px;_x000D_
flex-shrink: 0;_x000D_
background-color: #037cf5;_x000D_
}_x000D_
_x000D_
footer {_x000D_
height: 50px;_x000D_
flex-shrink: 0;_x000D_
background-color: #134c7d;_x000D_
}_x000D_
_x000D_
main {_x000D_
flex: 1 0 auto;_x000D_
}<div class="container">_x000D_
<header>HEADER</header>_x000D_
<main class="content">_x000D_
_x000D_
</main>_x000D_
<footer>FOOTER</footer>_x000D_
</div>DEMO - JSFiddle
Note : Check browser supports for FlexBox. caniuse
You can use Grid Layout. It is newer than Flexbox, and less supported in browsers.
Check it out:
HTML
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
}
Useful Links:
Browser Supoort: Can I Use - Grid Layout
Complete Guide: Grid Laoyut Guid
The Footer be positioned at the bottom of the page, but not fixed.
CSS
html {
height: 100%;
}
body {
position: relative;
margin: 0;
min-height: 100%;
padding: 0;
}
#header {
background: #595959;
height: 90px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 90px;
background-color: #595959;
}
HTML
<html>
<head></head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
A very simple example that shows how to fix the footer at the bottom in your application's layout.
/* Styles go here */_x000D_
html{ height: 100%;}_x000D_
body{ min-height: 100%; background: #fff;}_x000D_
.page-layout{ border: none; width: 100%; height: 100vh; }_x000D_
.page-layout td{ vertical-align: top; }_x000D_
.page-layout .header{ background: #aaa; }_x000D_
.page-layout .main-content{ height: 100%; background: #f1f1f1; text-align: center; padding-top: 50px; }_x000D_
.page-layout .main-content .container{ text-align: center; padding-top: 50px; }_x000D_
.page-layout .footer{ background: #333; color: #fff; } <!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />_x000D_
<link rel="stylesheet" href="style.css" />_x000D_
<script src="script.js"></script>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<table class="page-layout">_x000D_
<tr>_x000D_
<td class="header">_x000D_
<div>_x000D_
This is the site header._x000D_
</div>_x000D_
</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td class="main-content">_x000D_
<div>_x000D_
<h1>Fix footer always to the bottom</h1>_x000D_
<div>_x000D_
This is how you can simply fix the footer to the bottom._x000D_
</div>_x000D_
<div>_x000D_
The footer will always stick to the bottom until the main-content doesn't grow till footer._x000D_
</div>_x000D_
<div>_x000D_
Even if the content grows, the footer will start to move down naturally as like the normal behavior of page._x000D_
</div>_x000D_
</div>_x000D_
</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td class="footer">_x000D_
<div>_x000D_
This is the site footer._x000D_
</div>_x000D_
</td>_x000D_
</tr>_x000D_
</table>_x000D_
</body>_x000D_
_x000D_
</html>CSS
html {
height:100%;
}
body {
min-height:100%; position:relative;
}
.footer {
background-color: rgb(200,200,200);
height: 115px;
position:absolute; bottom:0px;
}
.footer-ghost { height:115px; }
HTML
<div class="header">...</div>
<div class="content">...</div>
<div class="footer"></div>
<div class="footer-ghost"></div>
For your footer:
#footer {
position: fixed;
height: 50px;
background-color: red;
bottom: 0px;
left: 0px;
right: 0px;
margin-bottom: 0px;
}
For your body:
body {
margin-bottom:50px;
}
#footer {_x000D_
background-color: red;_x000D_
position: fixed;_x000D_
bottom: 0px;_x000D_
left: 0px;_x000D_
right: 0px;_x000D_
height: 50px;_x000D_
margin-bottom: 0px;_x000D_
}_x000D_
_x000D_
div {_x000D_
margin: 20px 20px;_x000D_
}_x000D_
_x000D_
body {_x000D_
margin-bottom: 50px;_x000D_
}<div>_x000D_
Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom:_x000D_
0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright_x000D_
bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the_x000D_
bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally_x000D_
pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts_x000D_
at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always_x000D_
fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using_x000D_
some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and_x000D_
see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway._x000D_
I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for_x000D_
the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site_x000D_
have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc._x000D_
Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside_x000D_
of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most_x000D_
people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's_x000D_
container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people_x000D_
can have a look at it right now and see what the current code is to amend._x000D_
</div>_x000D_
<div id="footer">_x000D_
This is footer_x000D_
</div>Your footer element won't inherently be fixed to the bottom of your viewport unless you style it that way.
So if you happen to have a page that doesn't have enough content to push it all the way down it'll end up somewhere in the middle of the viewport; looking very awkward and not sure what to do with itself, like my first day of high school.
Positioning the element by declaring the fixed rule is great if you always want your footer visible regardless of initial page height - but then remember to set a bottom margin so that it doesn't overlay the last bit of content on that page. This becomes tricky if your footer has a dynamic height; which is often the case with responsive sites since it's in the nature of elements to stack.
You'll find a similar problem with absolute positioning. And although it does take the element in question out of the natural flow of the document, it still won't fix it to the bottom of the screen should you find yourself with a page that has little to no content to flesh it out.
Consider achieving this by:
<body> & <html> tagsminimum-height value to the nested wrapper element, usually the element which wraps all your descendant elements contained within the body structure (this wouldn't include your footer element)$("#addBodyContent").on("click", function() {_x000D_
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".flex-col:first-of-type");_x000D_
});_x000D_
_x000D_
$("#resetBodyContent").on("click", function() {_x000D_
$(".flex-col p").remove();_x000D_
});_x000D_
_x000D_
$("#addFooterContent").on("click", function() {_x000D_
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo("footer");_x000D_
});_x000D_
_x000D_
$("#resetFooterContent").on("click", function() {_x000D_
$("footer p").remove();_x000D_
});html, body {_x000D_
height: 91%;_x000D_
}_x000D_
_x000D_
.wrapper {_x000D_
width: 100%;_x000D_
left: 0;_x000D_
right: 0;_x000D_
box-sizing: border-box;_x000D_
padding: 10px;_x000D_
display: block;_x000D_
min-height: 100%;_x000D_
}_x000D_
_x000D_
footer {_x000D_
background: black;_x000D_
text-align: center;_x000D_
color: white;_x000D_
box-sizing: border-box;_x000D_
padding: 10px;_x000D_
}_x000D_
_x000D_
.flex {_x000D_
display: flex;_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
.flex-col {_x000D_
flex: 1 1;_x000D_
background: #ccc;_x000D_
margin: 0px 10px;_x000D_
box-sizing: border-box;_x000D_
padding: 20px;_x000D_
}_x000D_
_x000D_
.flex-btn-wrapper {_x000D_
display: flex;_x000D_
justify-content: center;_x000D_
flex-direction: row;_x000D_
}_x000D_
_x000D_
.btn {_x000D_
box-sizing: border-box;_x000D_
padding: 10px;_x000D_
transition: .7s;_x000D_
margin: 10px 10px;_x000D_
min-width: 200px;_x000D_
}_x000D_
_x000D_
.btn:hover {_x000D_
background: transparent;_x000D_
cursor: pointer;_x000D_
}_x000D_
_x000D_
.dark {_x000D_
background: black;_x000D_
color: white;_x000D_
border: 3px solid black;_x000D_
}_x000D_
_x000D_
.light {_x000D_
background: white;_x000D_
border: 3px solid white;_x000D_
}_x000D_
_x000D_
.light:hover {_x000D_
color: white;_x000D_
}_x000D_
_x000D_
.dark:hover {_x000D_
color: black;_x000D_
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div class="wrapper">_x000D_
<div class="flex-btn-wrapper">_x000D_
<button id="addBodyContent" class="dark btn">Add Content</button>_x000D_
<button id="resetBodyContent" class="dark btn">Reset Content</button>_x000D_
</div>_x000D_
<div class="flex">_x000D_
<div class="flex-col">_x000D_
lorem ipsum dolor..._x000D_
</div>_x000D_
<div class="flex-col">_x000D_
lorem ipsum dolor..._x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
<footer>_x000D_
<div class="flex-btn-wrapper">_x000D_
<button id="addFooterContent" class="light btn">Add Content</button>_x000D_
<button id="resetFooterContent" class="light btn">Reset Content</button>_x000D_
</div>_x000D_
lorem ipsum dolor..._x000D_
</footer>Like this add position:fixed; and bottom:0; below the selector #footer:
CSS
#footer {
background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
position:fixed;
bottom:0;
width:100%;
}
My solution:
html, body {
min-height: 100%
}
body {
padding-bottom: 88px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 88px;
}
I've found the sticky footer solution a bit painful on responsive sites, given that the height of your nav and footer can differ depending on the device. If you only care about working on modern browsers, you can accomplish your goal using a bit of Javascript.
If this is your HTML:
<div class="nav">
</div>
<div class="wrapper">
</div>
<div class="footer">
</div>
Then use this JQuery on every page:
$(function(){
/* Sets the minimum height of the wrapper div to ensure the footer reaches the bottom */
function setWrapperMinHeight() {
$('.wrapper').css('minHeight', window.innerHeight - $('.nav').height() - $('.footer').height());
}
/* Make sure the main div gets resized on ready */
setWrapperMinHeight();
/* Make sure the wrapper div gets resized whenever the screen gets resized */
window.onresize = function() {
setWrapperMinHeight();
}
});
Using Flex and Bootstrap4 (if you don't use Bootstrap4, you can achieve the same result using the flex properties)
<body class="d-flex flex-column">
<div>Header</div>
<div>Main container</div>
<div class="mt-auto">Footer</div>
</body>
This code working for me :
footer{
background-color: #333;
color: #EEE;
padding: 20px;
left: 0;
width: 100%;
bottom: 0;
position: fixed;
}
Important thing you should added bottom:0; and position: fixed;
Source: Stackoverflow.com