HTML, lepka stopka CSS (rosnąca zawartość)

Question

Feb 25, 2013, 09:48 PM

HTML, lepka stopka CSS (rosnąca zawartość)

Próbuję uzyskać lepką stopkę na dole div, która ma dynamiczną wysokość (rosnąca zawartość). Div musi unosić się na środku strony (w tej samej odległości od lewej i prawej).

Mam następujący kod HTML (pozbawiony zbędnych rzeczy):

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

i następujący CSS (również pozbawiony zbędnych rzeczy):

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

Jednak zawartość mainContainer unosi się i kontynuuje za stopką - zamiast stopki znajdującej się na samym dole. Wypróbowałem prawie wszystko, co mogłem znaleźć, z wyjątkiem przykładów, które zmuszają mnie do zmiany właściwości wyświetlania kontenera, ponieważ potrzebowałem tego, aby utrzymać go w ruchu.

Jakieś wskazówki, gdzie jestem idiotą? Dzięki!!

Musiałem trochę bardziej bawić się w .push, ale to rozwiązało problem! Dzięki za szybką odpowiedź!