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

CSS Push Div вниз страницы

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

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

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

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

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

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


css css-position footer positioning
person H Bellamy    schedule 11.01.2012    source источник
comment
попробуйте position:fixed, хотя это будет не лучший способ сделать это   -  person redDevil    schedule 11.01.2012
comment
Попробуйте положение: относительно тела.   -  person    schedule 26.04.2016
comment
ты не закрыл свой; после позиции: абсолютная. в противном случае он работал бы отлично!   -  person AlexHighHigh    schedule 19.06.2016

Ответы (12)


arrow_upward
613
arrow_downward

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

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

Вот скрипка: http://jsfiddle.net/uw8f9/

person Joseph Silber    schedule 11.01.2012
comment
Это решение не подходит для 90% случаев. если вы измените размер окна, нижний колонтитул будет перекрывать другой контент и не будет останавливаться прямо в конце вашего контента - person vsync; 28.10.2012
comment
@aroth, потому что это два совершенно разных решения. Это решение всегда будет держать нижний колонтитул внизу визуальной области экрана. Альтернативное решение сохраняет нижний колонтитул либо внизу экрана, либо внизу страницы, в зависимости от того, что больше - именно это и просил спрашивающий. - person My Head Hurts; 26.11.2012
comment
@MyHeadHurts - Вы абсолютно правы. После ответа я понял, что OP не хотел этого, но оставил его здесь для людей, которые ищут простой фиксированный нижний колонтитул. Из комментариев (и голосов) кажется, что многие люди борются с этой элементарной функцией CSS. - person Joseph Silber; 26.11.2012
comment
@MyHeadHurts - Достаточно честно, хотя для моих денег они оба в основном одинаковы. Контент прокручивается под нижним колонтитулом fixed, если для этого достаточно контента. Для меня этого достаточно. Конечно, я могу видеть, как очень большие нижние колонтитулы, подобные тому, что есть в stackoverflow, не будут хорошо работать с подходом fixed, но для базового однострочного нижнего колонтитула этот подход, на мой взгляд, работает хорошо. - person aroth; 27.11.2012
comment
@aroth Я согласен, это хорошее решение, и все зависит от того, чего вы хотите. Я просто указывал, почему одно решение было сложнее другого - ›они не делают то же самое. - person My Head Hurts; 27.11.2012
comment
Это решение для фиксированного нижнего колонтитула, а не липкого нижнего колонтитула. - person Robert Christian; 04.11.2013
comment
@rob - Правильно. Прочтите комментарии над вашими. - person Joseph Silber; 04.11.2013

arrow_upward
195
arrow_downward

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

HTML

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

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

CSS

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

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

К сожалению, вы должны применить padding-bottom к #body div, который имеет ту же высоту, что и 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/

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

person My Head Hurts    schedule 11.01.2012
comment
я не могу понять почему width: 100%; требуется для - person Somnath Kharat; 16.10.2013
comment
@sTACKoVERFLOW - Если вы не укажете width или оба left и right, тогда значения будут установлены на auto, и элемент будет перенесен в соответствии с его содержимым. Указание width: 100% или left: 0 и right:0 гарантирует, что абсолютно позиционированный элемент займет всю ширину элемента контейнера. - person My Head Hurts; 16.10.2013
comment
Я искал подобное поведение, но в моем случае div #body перемещается, скажем, float: left. Пример с коротким телом работает, а пример с длинным - нет. Любые предложения, как я могу получить желаемое поведение, используя float в #body div. - person Jatin; 17.02.2014
comment
@Ian сказал в ответе, потому что у него не было достаточно репутации, чтобы прокомментировать: Если у вас проблемы с asp.net с ответом от 'My Head Hurts' - вам нужно добавить 'height: 100%' к основному сгенерированный тег FORM, а также теги HTML и BODY, чтобы это работало. - person msouth; 28.05.2015
comment
Если вы пытаетесь заставить это работать внутри div, а не внутри всего тела, убедитесь, что вы указали height=100% для всех содержащихся элементов, включая <form> элементы. - person Ben Caine; 04.02.2016
comment
главное, что вы сделали, чего не сделал он, - это закрыть вашу позицию: зафиксировано с помощью a; - person AlexHighHigh; 19.06.2016
comment
Я до сих пор не понимаю, зачем нужен весь этот шаблон, но это был действительно единственный способ предотвратить смещение нижнего колонтитула или перекрытие другого содержимого для любого размера окна в сочетании с другим ответом: stackoverflow.com/a/12408519 - person vctls; 25.07.2017

arrow_upward
17
arrow_downward

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

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>

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

person Anonymous    schedule 11.08.2013

arrow_upward
5
arrow_downward

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

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

person Ian    schedule 12.05.2015

arrow_upward
4
arrow_downward

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

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

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

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

person Tarciso Junior    schedule 27.07.2015

arrow_upward
4
arrow_downward

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

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}
person AlexHighHigh    schedule 19.06.2016

arrow_upward
2
arrow_downward

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

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

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

arrow_upward
1
arrow_downward

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

person David B    schedule 07.10.2015

arrow_upward
1
arrow_downward

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

Это потому, что установка 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; 
}

... поскольку «держатель» будет брать высоту прямо от «тела».

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

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

Например. следующее, где я добавил класс «полной высоты» к каждому div, чтобы убедиться, что высота достигает всех элементов заголовка / тела / нижнего колонтитула:

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

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

person Tim L    schedule 18.10.2016

arrow_upward
0
arrow_downward

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

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

arrow_upward
-3
arrow_downward

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

<div id="footer" class="fixed-bottom w-100">
person Gowtham Sooryaraj    schedule 05.10.2019
comment
Нет никаких указаний на то, что OP использует Bootstrap. - person TylerH; 10.10.2019

arrow_upward

arrow_downward

person    schedule
comment
Пожалуйста, опишите в своем ответе, в чем была проблема и как этот фрагмент решит ее, чтобы помочь другим понять этот ответ. - person FZs; 09.11.2019