Нижний колонтитул не течет вниз страницы

Question

Желтый блок нижнего колонтитула, отображаемый в верхней части страницы, должен перетекать в нижнюю часть содержимого, как обычно, в нижнем колонтитуле.

вот CSS для #footer:

#footer {
    background-color: #2F3B47;
    padding: 20px;
    height: 180px;
    float: none;
    clear: both;
}

Мне нужно, чтобы решение работало как «липкий нижний колонтитул», чтобы оно перетекало в конец блока контента независимо от высоты div контента. Спасибо за любые советы или помощь!

Answer 1

Как это?

    position: fixed;
    left: 0;
    bottom: 0;

Answer 2

Проблема в том, что ваша оболочка не имеет связанной высоты, поэтому, хотя содержимое заполняет div, оно не заполняет div.

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

.wrapper {
min-height:900px;
}

Тем не менее, ваша проблема будет сохраняться, когда ваш контент выходит за пределы минимальной высоты.Один из ответов - убедиться, что все ваши вещи хранятся в DIV.Таким образом, если у вас есть .swf 500x500, вложите его в делитель 500x500, таким образом, содержимое вашей оболочки будет гарантировать, что ваш нижний колонтитул будет находиться на фиксированном расстоянии от нижней части вашего контента

Answer 3

См. Ответ "Фелипе Шеноне" @ this ссылка

Также установите нижний колонтитул "margin-bottom" на 0.

Это сработало как шарм.

Answer 4

Вы должны взглянуть на http://www.cssstickyfooter.com/

Короче говоря, у вас должна быть структура, состоящая из двух шагов (содержимого и нижнего колонтитула).

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>

CSS нижнего колонтитула выглядит так:

#footer {
position: relative;
margin-top: -150px; 
height: 150px;
clear:both;
} 

Полный код очень маленький и находится на сайте.

Answer 5

Это не сдвигается на дно, потому что вы абсолютно позиционировали весь свой контент. Похоже, с помощью сценариев вы взломали высоту #content и другие div s, но вы не сделали этого для #wrapper, поэтому #wrapper имеет вычисленную высоту 0, которая используется для вычисления положения #footer в потоке.

Там вам нужно либо переделать, как вы это делаете, т.е. используйте float вместо позиционирования, или вам нужно найти способ правильно расположить нижний колонтитул, что можно сделать, применив тот же сценарий к #wrapper, который вы применили к другим div, используя position: fixed в качестве другого Предложенный плакат или перемещение нижнего колонтитула внутри оболочки и использование абсолютного позиционирования.

Лично я бы переделал, как ты это делаешь. ABS позиционирование имеет свои применения, но редко макет всей страницы, включенной в эти применения: -)