HTML, CSS pie de página adhesivo (contenido creciente)

Question

Feb 25, 2013, 09:48 PM

HTML, CSS pie de página adhesivo (contenido creciente)

Estoy tratando de obtener un pie de página pegajoso en la parte inferior de un div que tiene altura dinámica (contenido creciente). El div necesita flotar en el medio de la página (la misma distancia de la izquierda y la derecha).

Tengo el siguiente HTML (despojado de cosas irrelevantes):

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

y el siguiente CSS (también despojado de lo irrelevante):

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

Sin embargo, el contenido de mainContainer flota y continúa detrás del pie de página, en lugar de que el pie de página se encuentre en la parte inferior. He intentado casi todo lo que pude encontrar, excepto los ejemplos que me obligan a cambiar la propiedad de visualización del contenedor, ya que lo necesitaba para mantenerlo flotando en el medio.

¿Alguna pista sobre dónde estoy siendo un idiota? ¡¡Gracias!!

Necesitaba jugar un poco más con el .push, ¡pero eso resolvió el problema! ¡Gracias por la rápida respuesta!