HTML, CSS липкий нижний колонтитул (растущий контент)

Я пытаюсь получить липкий нижний колонтитул внизу div с динамической высотой (растущий контент). Div должен плавать посередине страницы (на одинаковом расстоянии слева и справа).

У меня есть следующий HTML (лишенный ненужного материала):

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

и следующий CSS (также лишенный ненужного):

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

Тем не менее, содержимое mainContainer всплывает и продолжается за нижним колонтитулом — вместо того, чтобы нижний колонтитул был в самом низу. Я пробовал почти все, что мог найти, кроме примеров, которые заставляют меня изменить свойство display контейнера, так как мне нужно было, чтобы он оставался плавающим посередине.

Есть намеки на то, где я веду себя как идиот? Спасибо!!

Мне пришлось немного повозиться с .push, но это решило проблему! Спасибо за быстрый ответ!


html css dynamic-content sticky-footer
person tonya_ytzerman    schedule 25.02.2013    source источник

Ответы (2)


arrow_upward
8
arrow_downward

При использовании absolute нижний колонтитул и mainContainer зависят от того, где вы их разместили. Если вы используете absolute и установите нижний колонтитул внизу, он просто приклеится к нижней части области просмотра.

Для прилипания вы должны использовать относительные единицы измерения и правильную высоту там, где это необходимо.

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

Заказ идет

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

Таким образом, в нижнем колонтитуле всегда достаточно места, и он устанавливается внизу. margin:auto внутри обертки будет центрировать обертку (поэтому, если она не равна width:100%, она будет центрирована без встроенной строки)

person Casey Dwayne    schedule 26.02.2013

arrow_upward
0
arrow_downward

Итак, вы ищете липкий нижний колонтитул с компонентом по центру. Самый простой способ сделать это — создать элемент с фиксированной позицией внизу с центрированным div внутри него (в основном, div с заданной шириной и полем: auto).

Вы можете увидеть пример этого на http://jsfiddle.net/gHDd8/ - CSS в основном

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

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

Где HTML эквивалентен

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

Липкий нижний колонтитул остается внизу окна просмотра по центру страницы.

person Jimmy Breck-McKye    schedule 25.02.2013