Делайте div в нижней части содержимого страницы все время, даже если есть полосы прокрутки

CSS Нажмите Div внизу страницы

Пожалуйста, посмотрите на эту ссылку, я хочу наоборот: когда содержимое переполняется полосами прокрутки, я хочу, чтобы мой нижний колонтитул всегда находился в полной нижней части страницы, например Stack Overflow.

У меня есть div с id="footer" и этот CSS:

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

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

Изображение:

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

Ответы

Ответ 1

Именно это position: fixed было разработано для:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Здесь скрипка: http://jsfiddle.net/uw8f9/

Ответ 2

К сожалению, вы не можете сделать этого, добавив немного дополнительного HTML и один кусок CSS полагаться на другой.

HTML

Сначала вам нужно обернуть ваши header, footer и #body в div #holder:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

CSS

Затем установите height: 100% в html и body (фактическое тело, а не ваш #body div), чтобы вы могли установить минимальную высоту в процентах для дочерних элементов.

Теперь установите min-height: 100% в div #holder, чтобы он заполнил содержимое экрана и использовал position: absolute для размещения нижнего колонтитула в нижней части #holder div.

К сожалению, вы должны применить padding-bottom к div #body, который имеет ту же высоту, что и footer, чтобы гарантировать, что footer не находится над любым контентом:

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

Рабочий пример, короткое тело: http://jsfiddle.net/ELUGc/

Рабочий пример: long body: http://jsfiddle.net/ELUGc/1/

Ответ 3

Только что работал для другого решения, как в примере выше, есть ошибка (где-то ошибка) для меня. Отклонение от выбранного ответа.

html,body {
    height: 100%
}

#nonFooter {
    min-height: 100%;
    position:relative;
    /* Firefox */
    min-height: -moz-calc(100% - 30px);
    /* WebKit */
    min-height: -webkit-calc(100% - 30px);
    /* Opera */
    min-height: -o-calc(100% - 30px);
    /* Standard */
    min-height: calc(100% - 30px);
}

#footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
}

для HTML-макета

<body>
    <div id="nonFooter">header,middle,left,right,etc</div>
    <div id="footer"></div>
</body>

Ну, этот способ не поддерживает старый браузер, однако для старого браузера приемлемо прокручивать 30px для просмотра нижнего колонтитула

plunker

Ответ 4

Я понимаю, что он говорит, что не использовать это для "ответа на другие ответы", но, к сожалению, у меня недостаточно комментариев, чтобы добавить комментарий к соответствующему ответу (!), но...

Если у вас возникли проблемы с asp.net с ответом от "My Head Hurts" - вам нужно добавить "height: 100%" к основному сгенерированному тегу FORM, а также к тегам HTML и BODY, чтобы это работа.

Ответ 5

Ты не закрыл; после позиций: абсолютный. В противном случае ваш код был бы отлично!

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}

Ответ 6

Я бы прокомментировал, если бы мог, но у меня пока нет разрешений, поэтому я отправлю подсказку в качестве ответа для неожиданного поведения некоторых устройств Android:

Позиция: Исправлено только в Android 2.1 до 2.3, используя следующий метатег:

<meta name="viewport" content="width=device-width, user-scalable=no">.

см. http://caniuse.com/#search=position

Ответ 7

Это интуитивное решение, использующее команду viewport, которая устанавливает минимальную высоту в высоту видового экрана минус высота нижнего колонтитула.

html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}

Ответ 8

если у вас есть фиксированный нижний колонтитул высоты (например, 712px), вы можете сделать это с помощью js следующим образом:

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}

Ответ 9

Я решил аналогичную проблему, поместив все мое основное содержимое в дополнительный тег div (id = "external" ). Затем я переместил тег div с id = "footer" за пределами этого последнего "внешнего" тега div. Я использовал CSS для определения высоты "внешнего" и задал ширину и высоту "footer" . Я также использовал CSS, чтобы указать margin-left и margin-right "footer" как auto. В результате нижний колонтитул сидит в нижней части моей страницы и прокручивает страницу тоже (хотя она все еще появляется внутри "внешнего" div, но, к счастью, вне основного "содержимого" div, что кажется странным, но это где я хочу это).

Ответ 10

Я просто хочу добавить - большинство других ответов отлично работали для меня; однако потребовалось много времени, чтобы заставить их работать!

Это связано с тем, что установка height: 100% только поднимает родительскую высоту div!

Итак, если весь ваш html (внутри тела) выглядит следующим образом:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

Тогда будет выполнено следующее:

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

... как "держатель" будет поднимать его высоту непосредственно из "тела".

Престижность моей голове Hurts, чей ответ был тем, с которым я закончил работать!

Однако. Если ваш html более вложен (поскольку это только элемент полной страницы или в определенном столбце и т.д.), вам нужно убедиться, что каждый содержащий элемент также имеет height: 100% установлен на div. В противном случае информация о высоте будет потеряна между "телом" и "держателем".

например. следующее, где я добавил класс "полная высота" для каждого div, чтобы убедиться, что высота доходит до наших элементов header/body/footer:

<div class="full-height">
    <div class="container full-height">
        <div id="holder">
            <header>.....</header>
            <div id="body">....</div>
            <footer>....</footer>
        </div>
    </div>
</div>

И не забудьте установить высоту в полноразмерном классе в css:

#full-height{
    height: 100%;
}

Это исправило мои проблемы!

Ответ 11

использовать класс начальной загрузки с фиксированным основанием

<div id="footer" class="fixed-bottom w-100">