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

262

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

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

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

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

Образ: Examlple

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

— H Беллами
источник

1

попробуйте position:fixed, хотя это не самый лучший способ сделать это

— redDevil

Попробуйте положение: относительно тела.

1

ты не закрыл свою; после позиции: абсолют. это бы сработало совершенно иначе!

— AlexHighHigh

546

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

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

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

— Джозеф Силбер
источник

65

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

— vsync

10

@aroth, потому что это два совершенно разных решения. Это решение всегда будет держать нижний колонтитул в нижней части визуальной области экрана. Альтернативное решение удерживает нижний колонтитул либо в нижней части экрана, либо в нижней части страницы, в зависимости от того, какой из них больше - что и просил запрашивающий.

— Моя голова болит

6

@MyHeadHurts - Ты абсолютно прав. После ответа я понял, что это не то, чего хотел ОП, но я оставил это здесь для людей, которые ищут простой фиксированный нижний колонтитул. Из комментариев (и голосов) кажется, что многие люди борются с этой элементарной функцией CSS.

— Джозеф Силбер

1

@ MyHeadHurts - Достаточно справедливо, хотя за мои деньги они все в основном одинаковы. Содержимое прокручивается под fixedнижним колонтитулом, когда для этого достаточно содержимого. Это достаточно хорошо для меня. Конечно, я могу видеть, как очень большие нижние колонтитулы, такие как то, что они имеют в stackoverflow, не будут хорошо работать с этим fixedподходом, но для основного однострочного нижнего колонтитула этот подход хорошо работает, на мой взгляд.

— aroth

@aroth Я согласен, это хорошее решение, и все зависит от того, что вы хотите. Я просто указывал, почему одно решение было более сложным, чем другое -> они не делают то же самое.

— Моя голова болит

188

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

HTML

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

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

CSS

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

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

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

— Моя голова болит
источник

я не могу понять, почему ширина: 100%; требуется

— Somnath Kharat

4

@sTACKoVERFLOW - если вы не укажете a width или оба, left и rightтогда значения будут установлены в, autoи элемент будет перенесен, чтобы соответствовать его содержимому. Указание width: 100% или left: 0 и right:0гарантирует, что абсолютно позиционированный элемент занимает всю ширину контейнерного элемента

— My Head Hurts

Я искал подобное поведение, но в моем случае #body div плавает, скажем, "float: left". Пример короткого тела работает, а пример длинного тела - нет. Любые предложения, как я могу получить желаемое поведение, используя float в #body div.

— Джатин

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

— Мсут

Если вы пытаетесь , чтобы получить эту работу внутри DIV , а не внутри всего тела, убедитесь , что вы указали height=100%на все ваши содержащие элементы, включая <form>элементы.

— Бен Кейн

13

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

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

— анонимное
источник

5

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

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

— Ян
источник

4

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

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

— AlexHighHigh
источник

3

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

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

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

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

— Tarciso Junior
источник

2

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

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

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

— Obromios
источник

1

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

— Дэвид Б
источник

1

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

Это связано с тем, что настройка определяет 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. В противном случае информация о высоте будет потеряна между «телом» и «держателем».

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

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

— Тим Л
источник

0

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

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

— Джордж Карлин
источник

0

position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;

— Правин Кунду
источник

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

— ФЗ

-2

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

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

— Gowtham Sooryaraj
источник

Нет никаких признаков того, что OP использует Bootstrap

— TylerH