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

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

233 голосов
/ 11 января 2012

CSS Нажмите Div в нижней части страницы

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

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

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

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

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

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

Ответы [ 10 ]

497 голосов
/ 11 января 2012

Это именно то, для чего position: fixed был разработан: 

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

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

177 голосов
/ 11 января 2012

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

HTML

Сначала вам нужнооберните ваши header, footer и #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/

12 голосов
/ 11 августа 2013

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

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 пикселей для просмотра нижнего колонтитула

5 голосов
/ 12 мая 2015

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

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

4 голосов
/ 19 июня 2016

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

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}
3 голосов
/ 27 июля 2015

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

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

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

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

2 голосов
/ 03 августа 2015

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

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

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
1 голос
/ 18 октября 2016

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

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

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

Слава моей голове болит, чей ответ был тот, который я закончил тем, что получил работу!

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

Например, следующее, где я добавил класс «full height» для каждого 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%;
}

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

1 голос
/ 07 октября 2015

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

1 голос
/ 10 августа 2015

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

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