HTML, CSS sticky footer (growing content)
I'm trying to get a sticky footer at the bottom of a div that has dynamic height (growing content). The div needs to float in the middle of the page (same distance from left and right).
I have the following HTML (stripped of irrelevant stuff):
<html>
<body>
<div class="bodybackground">
<div class="container"><!-- floats in the middle -->
<div class="mainContainer"><!-- different color etc -->
<!-- content with dynamic height -->
</div>
<footer class="pagefooter"></footer>
</div>
</div>
</body>
</html>
and the following CSS (also stripped of the irrelevant stuff):
html {
height: 100%;
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
height: 100%;
}
.bodybackground {
height: 100%;
min-height: 100%;
}
.container {
min-height: 100%;
display: inline-block; /* needed make it float in the middle of body */
top: 0px;
position: relative;
padding: 0px;
padding-bottom: 158px; /* height of footer */
}
.mainContainer {
position: absolute;
height: 100%;
overflow: auto;
}
.pagefooter {
position: absolute;
bottom: 0px;
margin: 0px;
padding: 0px;
height: 158px;
}
Yet the content of mainContainer floats out and continues behind the footer - instead of the footer being at the very bottom. I have tried just about everything I could find except the examples that force me to change the display property of container, as I needed that to keep it floating in the middle.
Any clues on where I'm being an idiot? Thanks!!
I needed to fiddle a bit more with the .push, but that solved the problem! Thanks for the quick answer!
Answer
By using absolute, the footer and mainContainer are subject to where you put them. If you use absolute and set the footer to the bottom, it will just stick to the bottom of the viewport.
For sticky, you should use relative units and the correct heights where needed.
html, body { width:100%; height:100%; }
#wrap {
min-height:100%;
height:auto !important;
height:100%;
margin: 0 auto -158px; /* Bottom value must = footer height */
}
.pagefooter, .push { width:100%; height:158px; position:relative; bottom:0; }
The order goes
<div id="wrap">
<!--All of your content goes here-->
<div class="push"></div>
</div>
<div class="pagefooter"></div>
That way, the footer always has enough room and is set to the bottom. margin:auto inside the wrap will center the wrap (so as long as it isn't width:100%, it will center without the inline)