Geek Answers Handbook

HTML, CSS sticky footer (growing content)

I am trying to get a sticky footer at the bottom of a div that has dynamic height (growing content). The div should float in the middle of the page (same distance left and right).

I have the following HTML (devoid of unnecessary things):

<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 devoid of unnecessary material):

 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; }

However, the contents of mainContainer pops up and continues beyond the footer - instead of the footer located at the bottom. I tried everything I could find, except for the examples that make me change the display property of the container, since I need it so that it floats in the middle.

Any clues about where I am an idiot? Thanks!!

I needed to play a little with .push, but this solved the problem! Thanks for the quick response!

+4
source share
2 answers

Using absolute, the footer and mainContainer obey where you put them. If you use an absolute value and set the footer below, it will just stick to the bottom of the viewport.

For sticky, you should use relative units and correct heights where necessary.

 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; }

Order goes

  <div id="wrap"> <!--All of your content goes here--> <div class="push"></div> </div> <div class="pagefooter"></div>

Thus, the footer always has enough space and is set to the bottom. margin: auto inside the wrapper will center the wrapper (until it is width: 100%, it will be centered without inline)

+7
source

So you are looking for a sticky footer with a centered component. The easiest way to do this is to create an element with a fixed position at the bottom with a centered div inside it (basically a div with a specified width and margin: auto).

You can see an example of this at http://jsfiddle.net/gHDd8/ - CSS is basically

 .outerBlockElement { position: fixed; bottom: 0; left: 0; right: 0; } .innerBlockElement { width: 50%; margin: auto; }

If HTML is equivalent

 <div class="outerBlockElement"> <p class="innerBlockElement">I am sticky footer text!</p> </div>

The sticky footer is at the bottom of the viewport, in the center of which is the page.

0
source

More articles:


All Articles