I need my footer to be fixed to the bottom of the page and to center it. The contents of the footer may change at all time so I can't just center it via margin-left: xxpx; margin-right: xxpx;
The problem is that for some reason this doesn't work:
#whatever {
position: fixed;
bottom: 0px;
margin-right: auto;
margin-left: auto;
}
I crawled the web and found nothing. I tried making a container div and nada. I tried other combinations and gurnisht. How can I make this happen?
Thanks
This question is related to
css
positioning
sticky-footer
A jQuery solution
$(function(){
$(window).resize(function(){
placeFooter();
});
placeFooter();
// hide it before it's positioned
$('#footer').css('display','inline');
});
function placeFooter() {
var windHeight = $(window).height();
var footerHeight = $('#footer').height();
var offset = parseInt(windHeight) - parseInt(footerHeight);
$('#footer').css('top',offset);
}
<div id='footer' style='position: fixed; display: none;'>I am a footer</div>
Sometimes it's easier to implement JS than to hack old CSS.
The problem lies in position: static. Static means don't do anyting at all with the position. position: absolute is what you want. Centering the element is still tricky though. The following should work:
#whatever {
position: absolute;
bottom: 0px;
margin-right: auto;
margin-left: auto;
left: 0px;
right: 0px;
}
or
#whatever {
position: absolute;
bottom: 0px;
margin-right: auto;
margin-left: auto;
left: 50%;
transform: translate(-50%, 0);
}
But I recommend the first method. I used centering techniques from this answer: How to center absolutely positioned element in div?
I have encased the 'problem div in another div' lets call this div the enclose div... make the enclose div in css have a width of 100% and postion fixed with a bottom of 0... then insert the problem div into the enclose div this is how it would look
#problem {margin-right:auto;margin-left:auto; /*what ever other styles*/}
#enclose {position:fixed;bottom:0px;width:100%;}
then in html...
<div id="enclose">
<div id="problem">
<!--this is where the text/markup would go-->
</div>
</div>
There ya go!
-Hypertextie
revised code by Daniel Kanis:
just change the following lines in CSS
.problem {text-align:center}
.enclose {position:fixed;bottom:0px;width:100%;}
and in html:
<p class="enclose problem">
Your footer text here.
</p>
Based on the comment from @Michael:
There is a better way to do this. Simply create the body with position:relative and a padding the size of the footer + the space between content and footer you want. Then just make a footer div with an absolute and bottom:0.
I went digging for the explanation and it boils down to this:
More details at http://css-tricks.com/absolute-positioning-inside-relative-positioning/
here is an example using css grid.
html, body{_x000D_
height: 100%;_x000D_
width: 100%;_x000D_
}_x000D_
.container{_x000D_
height: 100%;_x000D_
display:grid;_x000D_
/*we divide the page into 3 parts*/_x000D_
grid-template-rows: 20px auto 30px;_x000D_
text-align: center; /*this is to center the element*/ _x000D_
_x000D_
}_x000D_
_x000D_
.container .footer{_x000D_
grid-row: 3; /*the footer will occupy the last row*/_x000D_
display: inline-block;_x000D_
margin-top: -20px;_x000D_
}<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
<meta charset="UTF-8">_x000D_
<link rel="stylesheet" href="style.css">_x000D_
<title>Document</title>_x000D_
</head>_x000D_
<body>_x000D_
<div class="container">_x000D_
<div class="header">_x000D_
_x000D_
</div>_x000D_
<div class="content">_x000D_
_x000D_
</div>_x000D_
<div class="footer">_x000D_
here is the footer_x000D_
</div>_x000D_
</div>_x000D_
</body>_x000D_
</html>you can use css grid:a concrete example
I ran into a problem where the typical position: fixed and bottom: 0 didn't work. Discovered a neat functionality with position: sticky. Note it's "relatively" new so it won't with IE/Edge 15 and earlier.
Here's an example for w3schools.
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: sticky;
bottom: 0;
background-color: yellow;
padding: 30px;
font-size: 20px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dlerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dlerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dlerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dlerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas </p>
<div class="sticky">I will stick to the screen when you reach my scroll position</div>
</body>
</html>There are 2 potential issues that I see:
1 - IE has had trouble with position:fixed in the past. If you are using IE7+ with a valid doctype or a non-IE browser this isn't part of the problem
2 - You need to specify a width for the footer if you want the footer object to be centered. Otherwise it defaults to the full width of the page and the auto margin for the left and right get set to 0. If you want the footer bar to take up the width (like the StackOverflow notice bar) and center the text, then you need to add "text-align: center" to your definition.
Source: Stackoverflow.com