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

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



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



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



#footer {

    position: absolute;

    bottom: 30px;

    width: 100%;

}


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



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



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

638   10  

10 ответов:

именно position: fixed предназначен для:

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

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

444  
2012-09-07 21:49:01

к сожалению, вы не можете сделать это без добавления немного дополнительного 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/

174  
2012-10-28 19:03:00

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

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

12  
2013-08-11 08:26:43

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

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

5  
2015-05-12 12:32:15

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

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}
4  
2016-06-19 23:41:40

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

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

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

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

3  
2015-07-27 21:31:37

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

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

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
2  
2015-08-03 08:39:25

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

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}
1  
2015-08-10 16:48:35

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

1  
2015-10-07 03:29:05

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

это потому, что параметр 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 убедитесь, что высота доходит до наших элементов заголовка / тела / нижнего колонтитула:

<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  
2016-10-18 17:18:49

Comments

    Ничего не найдено.
Click here to cancel reply.