I have the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that has a footer which I can't make sit at the bottom of the page.
I want the footer to
The CSS is inherited and befuddles me. I can't seem to change it properly to put a minimum height on the content or make the footer go to the bottom.
Just customize the footer section
.footer
{
position: fixed;
bottom: 0;
width: 100%;
padding: 1rem;
text-align: center;
}
<div class="footer">
Footer is always bootom
</div>
A very simple approach which works great cross browser is this:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
html,_x000D_
body {_x000D_
margin:0;_x000D_
padding:0;_x000D_
height:100%;_x000D_
}_x000D_
#container {_x000D_
min-height:100%;_x000D_
position:relative;_x000D_
}_x000D_
#header {_x000D_
background:#ff0;_x000D_
padding:10px;_x000D_
}_x000D_
#body {_x000D_
padding:10px;_x000D_
padding-bottom:60px; /* Height of the footer */_x000D_
}_x000D_
#footer {_x000D_
position:absolute;_x000D_
bottom:0;_x000D_
width:100%;_x000D_
height:60px; /* Height of the footer */_x000D_
background:#6cf;_x000D_
}<div id="container">_x000D_
<div id="header">header</div>_x000D_
<div id="body">body</div>_x000D_
<div id="footer">footer</div>_x000D_
</div>I have used in my many projects and never got any single issue :)
for your reference, Code are in snippet
* {_x000D_
margin: 0;_x000D_
}_x000D_
html, body {_x000D_
height: 100%;_x000D_
}_x000D_
.wrapper {_x000D_
min-height: 100%;_x000D_
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */_x000D_
height: 100%;_x000D_
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */_x000D_
background:green;_x000D_
}_x000D_
.footer, .push {_x000D_
height: 50px; /* .push must be the same height as .footer */_x000D_
}_x000D_
_x000D_
.footer{_x000D_
background:gold;_x000D_
}<html>_x000D_
<head>_x000D_
<meta charset="utf-8">_x000D_
<title>Untitled Document</title>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<div class="wrapper">_x000D_
Content Area_x000D_
</div>_x000D_
_x000D_
<div class="push">_x000D_
</div>_x000D_
_x000D_
<div class="footer">_x000D_
Footer Area_x000D_
</div>_x000D_
</body>_x000D_
</html>I've used this to stick my footer to the bottom and it worked for me:
HTML
<body>
<div class="allButFooter">
<!-- Your page's content goes here, including header, nav, aside, everything -->
</div>
<footer>
<!-- Footer content -->
</footer>
</body>
That's the only modification you have to do in the HTML, add that div with the "allButFooter" class. I did it with all the pages, those that were so short, I knew the footer wouldn't stick to the bottom, and also pages long enough that I already knew I had to scroll. I did this, so I could see that it works ok in the case that a page's content is dynamic.
CSS
.allButFooter {
min-height: calc(100vh - 40px);
}
The "allButFooter" class has a min-height value that depends on the viewport's height (100vh means 100% of the viewport height) and the footer's height, that I already knew was 40px.
That's all I did, and it worked perfectly for me. I haven't tried it in every browser, just Firefox, Chrome and Edge, and the results were as I wanted. The footer sticks to the bottom, and you don't have to mess with z-index, position, or any other properties. The position of every element in my document was the default position, I didn't change it to absolute or fixed or anything.
Working with responsive design
Here's something I would like to clear out. This solution, with the same Footer that was 40px high didn't work as I expected when I was working in a responsive design using Twitter-Bootstrap. I had to modify the value I was substracting in the function:
.allButFooter {
min-height: calc(100vh - 95px);
}
This is probably because Twitter-Bootstrap comes with its own margins and paddings, so that's why I had to adjust that value.
I hope this is of some use for you guys! At least, it's a simple solution to try, and it doesn't involve making big changes to the whole document.
One thing to be wary of is mobile devices, since they implement the idea of the viewport in an 'unusual' way:
As such, using position: fixed; (as i've seen recommended in other places) usually isn't the way to go. Of course, it depends upon the exact behaviour you're after.
What I've used, and has worked well on desktop and mobile, is:
<body>
<div id="footer"></div>
</body>
with
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}
#footer {
position: absolute;
bottom: 0;
}
This is known as a sticky footer. A google search for it comes up with a lot of results. A CSS Sticky Footer is the one I've used successfully. But there are more.
* {_x000D_
margin: 0;_x000D_
}_x000D_
html, body {_x000D_
height: 100%;_x000D_
}_x000D_
.wrapper {_x000D_
min-height: 100%;_x000D_
height: auto !important;_x000D_
height: 100%;_x000D_
margin: 0 auto -4em;_x000D_
}_x000D_
.footer, .push {_x000D_
height: 4em;_x000D_
}<html>_x000D_
<head>_x000D_
<link rel="stylesheet" href="layout.css" ... />_x000D_
</head>_x000D_
<body>_x000D_
<div class="wrapper">_x000D_
<p>Your website content here.</p>_x000D_
<div class="push"></div>_x000D_
</div>_x000D_
<div class="footer">_x000D_
<p>Copyright (c) 2008</p>_x000D_
</div>_x000D_
</body>_x000D_
</html>Some solutions didn't work for me but the best option I found was the example below when i decided to use the flex option.
html, body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
.main-contents{
flex: 1 0 auto;
min-height: 100%;
margin-bottom: -77px;
background-color: #CCC;
}
.footer{
height: 77px;
min-height: 77px;
width: 100%;
bottom: 0;
left: 0;
background: #000000;
flex-shrink: 0;
flex-direction: row;
position: relative;
}
.footer-text{
color: #FFF;
}
@media screen and (max-width: 767px){
#content{
padding-bottom: 0;
}
.footer{
position: relative;
/*position: absolute;*/
height: 77px;
width: 100%;
bottom: 0;
left: 0;
}
}<html>
<body>
<div class="main-contents" >
this is the main content
</div>
</body>
<footer class="footer">
<p class="footer-text">This is the sticky footer</p>
</footer>
</html>I just answered as similar question in here:
Position footer at bottom of page having fixed header
I'm pretty new at web development, and I know this has been answered already, but this is the easiest way I found to solve it and I think is somehow different. I wanted something flexible because the footer of my web app has a dynamic height, I ended up using FlexBox and a spacer.
html, body {
height: 100%;
display: flex;
flex-direction: column;
margin: 0px;
}
I'm assuming a column behavior for our app, in the case you need to add a header, hero or any content vertically aligned.
.spacer {
flex: 1;
}
<html>
<body>
<header> Header </header>
Some content...
<div class='spacer'></div>
<footer> Footer </footer>
</body>
</html>
You can play with it here https://codepen.io/anon/pen/xmGZQL
I consider you can set the main content to viewport height, so if the content exceeds, the height of the main content will define the position of the footer
* {
margin: 0;
padding: 0;
width: 100%;
}
body {
display: flex;
flex-direction: column;
}
header {
height: 50px;
background: red;
}
main {
background: blue;
/* This is the most important part*/
height: 100vh;
}
footer{
background: black;
height: 50px;
bottom: 0;
}<header></header>
<main></main>
<footer></footer>What I did
Html
<div>
<div class="register">
/* your content*/
</div>
<div class="footer" />
<div/>
css
.register {
min-height : calc(100vh - 10rem);
}
.footer {
height: 10rem;
}
Dont need to use position fixed and absolute. Just write the html in proper way.
What about that:
<div style="min-height: 100vh;">
content
</div>
<footer>
copyright blah blah
</footer>
Apart from all the CSS and jQuery solutions provided,
I have listed a solution using Bootstrap with a single class declaration on body tag: d-flex flex-column justify-content-between
html, body {
height: 100%;
}<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body class="d-flex flex-column justify-content-between text-white text-center">
<header class="p-5 bg-dark">
<h1>Header</h1>
</header>
<main class="p-5 bg-primary">
<h1>Main</h1>
</main>
<footer class="p-5 bg-warning">
<h1>Footer</h1>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
A simple solution that i use, works from IE8+
Give min-height:100% on html so that if content is less then still page takes full view-port height and footer sticks at bottom of page. When content increases the footer shifts down with content and keep sticking to bottom.
JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
Do this
<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>
You can also read about flex it is supported by all modern browsers
Update: I read about flex and tried it. It worked for me. Hope it does the same for you. Here is how I implemented.Here main is not the ID it is the div
body {
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
display: block;
flex: 1 0 auto;
}
Here you can read more about flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Do keep in mind it is not supported by older versions of IE.
You can do this
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
This is how i solved the same issue
html {_x000D_
height: 100%;_x000D_
box-sizing: border-box;_x000D_
}_x000D_
_x000D_
*,_x000D_
*:before,_x000D_
*:after {_x000D_
box-sizing: inherit;_x000D_
}_x000D_
_x000D_
body {_x000D_
position: relative;_x000D_
margin: 0;_x000D_
padding-bottom: 6rem;_x000D_
min-height: 100%;_x000D_
font-family: "Helvetica Neue", Arial, sans-serif;_x000D_
}_x000D_
_x000D_
.demo {_x000D_
margin: 0 auto;_x000D_
padding-top: 64px;_x000D_
max-width: 640px;_x000D_
width: 94%;_x000D_
}_x000D_
_x000D_
.footer {_x000D_
position: absolute;_x000D_
right: 0;_x000D_
bottom: 0;_x000D_
left: 0;_x000D_
padding: 1rem;_x000D_
background-color: #efefef;_x000D_
text-align: center;_x000D_
}<div class="demo">_x000D_
_x000D_
<h1>CSS “Always on the bottom” Footer</h1>_x000D_
_x000D_
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>_x000D_
_x000D_
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>_x000D_
_x000D_
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>_x000D_
_x000D_
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>_x000D_
</div>_x000D_
_x000D_
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>It's actually very simple. This solution doesn't require to know footer height.
<body>
<div class="app">
Website
</div>
<div class="footer">
Footer
</div>
</body>
.app {
min-height: 100vh;
}
footer {
margin-top:calc(5% + 60px);
}
This works fine
here is my two cents. In comparisson to other solutions, one does not need to add extra containers. Therefor this solution is a bit more elegant. Beneath the code example i'll explain why this works.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
html
{
height:100%;
}
body
{
min-height:100%;
padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
margin:0; /*see above comment*/
}
body
{
position:relative;
padding-bottom:60px; /* Same height as the footer. */
}
footer
{
position:absolute;
bottom:0px;
height: 60px;
background-color: red;
}
</style>
</head>
<body>
<header>header</header>
<footer>footer</footer>
</body>
</html>
So the first thing we do, is make the biggest container( html ) 100%. The html page is as big as the page itself. Next we set the body height, it can be bigger than the 100% of the html tag, but it should at least be as big, therefore we use min-height 100%.
We also make the body relative. Relative means you can move the block element around relative from its original position. We don't use that here though. Because relative has a second use. Any absolute element is either absolute to the root (html) or to the first relative parent/grandparent. That's what we want, we want the footer to be absolute, relative to the body, namely the bottom.
The last step is to set the footer to absolute and bottom:0, which moves it to the bottom of the first parent/grandparent that is relative ( body ofcourse ).
Now we still have one problem to fix, when we fill the complete page, the content goes beneath the footer. Why? well, because the footer is no longer inside the "html flow", because it is absolute. So how do we fix this? We will add padding-bottom to the body. This makes sure the body is actually bigger than it's content.
I hope i made a lot clear for you guys.
Yet, another really simple solution is this one:
html, body {
height: 100%;
width: 100%;
margin: 0;
display: table;
}
footer {
background-color: grey;
display: table-row;
height: 0;
}
The trick is to use a display:table for the whole document and display:table-row with height:0 for the footer.
Since the footer is the only body child that has a display as table-row, it is rendered at the bottom of the page.
I have myself been looking into this problem. I have seen quite a few solutions and each of them had issues, often involving some magic numbers.
So using best practices from various sources I came up with this solution:
http://jsfiddle.net/vfSM3/248/
The thing I wanted to achieve specifically here was to get the main content to scroll between footer and header inside green area.
here is a simple css:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
header {
height: 4em;
background-color: red;
position: relative;
z-index: 1;
}
.content {
background: white;
position: absolute;
top: 5em;
bottom: 5em;
overflow: auto;
}
.contentinner {
}
.container {
height: 100%;
margin: -4em 0 -2em 0;
background: green;
position: relative;
overflow: auto;
}
footer {
height: 2em;
position: relative;
z-index: 1;
background-color: yellow;
}
In each example the texts are freely-editable to illustrate how the content would render in different scenarios.
body{ height:100vh; margin:0; }
header{ min-height:50px; background:lightcyan; }
footer{ min-height:50px; background:PapayaWhip; }
/* Trick */
body{
display:flex;
flex-direction:column;
}
footer{
margin-top:auto;
}<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>body{
min-height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
}
header{
min-height:50px;
background:lightcyan;
}
footer{
min-height:50px;
background:PapayaWhip;
}<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>This method below uses a "trick" by placing an ::after pseudo-element on the body, and set it to have the exact height of the footer, so it will occupy the exact same space the footer does, so when the footer is absolute positioned over it, it would appear like the footer is really taking up space and eliminate the negative affects of it's absolute positioning (for example, going over the body's content)
position:absolute (no dynamic footer height)body{ min-height:100vh; margin:0; position:relative; }
header{ min-height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }
/* Trick: */
body {
position: relative;
}
body::after {
content: '';
display: block;
height: 50px; /* Set same as footer's height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>html{ height:100%; }
body { min-height:100%; margin:0; }
header {
height: 50px;
background: lightcyan;
}
article {
height: 1%;
}
footer {
height: 50px;
background: PapayaWhip;
}
/**** Trick: ****/
body {
display: table;
width: 100%;
}
body > footer {
display: table-row;
}<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>All CSS methods I have come across are too rigid. Also, setting the footer to fixed is not an option if that's not part of the design.
Tested on:
Assuming this layout:
<html>
<body>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
Use the following jQuery function:
$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
What that does is set the min-height for #content to the window height - the height of the footer what ever that might be at the time.
Since we used min-height, if #content height exceeds the window height, the function degrades gracefully and does not any effect anything since it's not needed.
See it in action:
$("#fix").click(function() {
$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background: #111;
}
body {
text-align: center;
background: #444
}
#content {
background: #999;
}
#footer {
background: #777;
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="content">
<p>Very short content</p>
<button id="fix">Fix it!</button>
</div>
<div id="footer">Mr. Footer</div>
</body>
</html>Same snippet on JsFiddle
We can take this further and make this function adapt to dynamic viewer height resizing like so:
$(window).resize(function() {
$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
}).resize();* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background: #111;
}
body {
text-align: center;
background: #444
}
#content {
background: #999;
}
#footer {
background: #777;
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="content">
<p>Very short content</p>
</div>
<div id="footer">Mr. Footer</div>
</body>
</html>My jquery method, this one puts the footer at the bottom of the page if the page content is less than the window height, or just puts the footer after the content otherwise:
Also, keeping the code in it's own enclosure before other code will reduce the time it takes to reposition the footer.
(function() {
$('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
A very simple flex solution that does not assume fixed heights or changing position of elements.
HTML
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
CSS
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
Browser Support
All major browsers, except IE11 and below.
Make sure to use Autoprefixer for appropriate prefixes.
.container {_x000D_
display: -webkit-box;_x000D_
display: -ms-flexbox;_x000D_
display: flex;_x000D_
-webkit-box-orient: vertical;_x000D_
-webkit-box-direction: normal;_x000D_
-ms-flex-direction: column;_x000D_
flex-direction: column;_x000D_
min-height: 100vh;_x000D_
}_x000D_
_x000D_
main {_x000D_
-webkit-box-flex: 1;_x000D_
-ms-flex: 1;_x000D_
flex: 1;_x000D_
}_x000D_
_x000D_
/////////////////////////////////////////////_x000D_
_x000D_
body,_x000D_
html {_x000D_
margin: 0;_x000D_
padding: 0;_x000D_
}_x000D_
_x000D_
header,_x000D_
main,_x000D_
footer {_x000D_
margin: 0;_x000D_
display: block;_x000D_
}_x000D_
_x000D_
header,_x000D_
footer {_x000D_
min-height: 80px; _x000D_
}_x000D_
_x000D_
header {_x000D_
background-color: #ccc;_x000D_
}_x000D_
_x000D_
main {_x000D_
background-color: #f4f4f4;_x000D_
}_x000D_
_x000D_
footer {_x000D_
background-color: orange;_x000D_
}<div class="container">_x000D_
<header></header>_x000D_
<main></main>_x000D_
<footer></footer>_x000D_
</div>Just set the html, body, and the other rows except the footer to 100%. e.g
<body>
<header></header>
<content></content>
<footer></footer>
the css becomes
html, body, header, content{
height:100%;
}
Source: Stackoverflow.com