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

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

У меня есть следующие 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 выплывает и продолжается за нижним колонтитулом - вместо нижнего колонтитула, находящегося на самом дне. Я пробовал все, что мог найти, кроме примеров, которые заставляют меня менять свойство отображения контейнера, поскольку мне это нужно, чтобы оно плавало посередине.

Любые подсказки о том, где я идиот? Благодаря!!

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

источник

2013-02-25 tonya_ytzerman

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

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

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 внутри обертки будет центрировать обертку (до тех пор, пока она не будет шириной: 100%, она будет центрирована без встроенного)

источник

2013-02-26 03:16:52

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

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

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

Липкий сноска остается в нижней части окна просмотра, по центру на странице.

источник

2013-02-25 20:58:33

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

ответ

Смежные вопросы