HTML, CSS sticky footer (growing content)

Asked 25/2, 2013 at 20:48 Answered 26/2, 2013 at 3:16

Solved html css sticky-footer dynamic-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!

Regent answered 25/2, 2013 at 20:48 Comment(0)

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)

Funch answered 26/2, 2013 at 3:16 Comment(0)

So, you're looking for a sticky footer with a centered component. The easiest way to do this would be to create a fixed-position element at the bottom with a centered div within it (basically, a div with specified width and margin: auto).

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

.outerBlockElement {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.innerBlockElement {
    width: 50%;
    margin: auto;
}

Where the HTML is equivalent to

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

The sticky footer stays at the bottom of the viewport, centered in the page.

Ohare answered 25/2, 2013 at 20:58 Comment(0)

Recommended topics

Hot tags