Spraw, aby div pozostawał na dole strony przez cały czas, nawet jeśli są paski przewijania

CSS Push Div to bottom of page

Proszę spojrzeć na ten link, chcę odwrotnie: gdy zawartość przepełnia się do pasków przewijania, chcę, aby moja stopka była zawsze na kompletny dół strony, jak przepełnienie stosu.

Mam div z id="footer" i ten CSS: 

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

Ale wszystko, co robi, to iść do dołu widoku, i pozostaje tam, nawet jeśli przewinąć w dół, więc nie jest już na dole.

Obraz: Examlple

Sorry jeśli nie wyjaśnione, nie chcę, aby to było naprawione, tylko aby było na samym dole całej treści.

Author: Community, 2012-01-11
Source

12 answers

To jest dokładnie to, do czego position: fixed został zaprojektowany: 

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

Oto skrzypce: http://jsfiddle.net/uw8f9/

 588
Author: Joseph Silber,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-07 18:49:01

Niestety nie możesz tego zrobić bez dodawania trochę dodatkowego HTML i posiadania jednego elementu CSS polegającego na innym.

HTML

Najpierw musisz owinąć swój header,footer i #body do #holder div: 

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

CSS

Następnie Ustaw height: 100% na html i body (Rzeczywiste ciało, a nie twój #body div), aby upewnić się, że możesz ustawić minimalną wysokość jako procent na elementach potomnych.

Teraz ustaw min-height: 100% na #holder div tak, aby wypełniał zawartość ekran i użyj position: absolute, aby umieścić stopkę na dole #holder div.

Niestety, musisz zastosować padding-bottom do #body div, który jest tej samej wysokości co footer, aby upewnić się, że footer nie znajduje się powyżej żadnej treści: 

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

przykład pracy, krótkie ciało: http://jsfiddle.net/ELUGc/

przykład pracy, długie ciało: http://jsfiddle.net/ELUGc/1/

 195
Author: My Head Hurts,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-28 17:03:00

Po prostu wypracowane dla innego rozwiązania, jak powyższy przykład mają błąd (gdzieś błąd) dla mnie. Wariacja od wybranej odpowiedzi.

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

Dla układu html 

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

Cóż w ten sposób nie obsługuje starej przeglądarki, jednak jej akceptowalne dla starej przeglądarki do przewijania 30px, aby wyświetlić stopkę

 14
Author: Anonymous,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-04-08 15:24:41

Zdaję sobie sprawę, że mówi się, aby nie używać tego do "odpowiadania na inne odpowiedzi", ale niestety nie mam wystarczająco rep, aby dodać komentarz do odpowiedniej odpowiedzi (!) ale ...

Jeśli masz problemy z asp.net z odpowiedzią "boli mnie głowa" - musisz dodać "height: 100%" do głównego generowanego tagu formularza, a także znaczników HTML i BODY, aby to działało.

 5
Author: Ian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-12 09:32:15

Nie zamknąłeś swojego; po pozycji: absolute. W przeciwnym razie powyższy kod zadziałałby idealnie!

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}
 4
Author: AlexHighHigh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-19 20:41:40

Skomentowałbym, gdybym mógł , ale nie mam jeszcze uprawnień, więc napiszę podpowiedź jako odpowiedź na nieoczekiwane zachowanie na niektórych urządzeniach z Androidem:

Pozycja: Naprawiono działa tylko w Androidzie 2.1 do 2.3 za pomocą następującego meta tagu: 

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

Zobacz http://caniuse.com/#search=position

 3
Author: Tarciso Junior,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-27 18:31:37

Jest to intuicyjne rozwiązanie za pomocą polecenia viewport, które ustawia minimalną wysokość na wysokość viewport minus Wysokość stopki.

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

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
 2
Author: Obromios,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-03 05:39:25

Rozwiązałem podobny problem, umieszczając całą moją główną zawartość w dodatkowym znaczniku div (id= "outer"). Następnie przeniosłem znacznik div z id = " footer "poza ten ostatni" zewnętrzny " znacznik div. Użyłem CSS, aby określić wysokość "outer" i określono szerokość i Wysokość "stopki". Użyłem również CSS do określenia marginesu-lewo i margin-prawo "stopki" jako auto. W rezultacie stopka znajduje się mocno na dole mojej strony i przewija się wraz ze stroną (chociaż nadal się pojawia wewnątrz" zewnętrznego "div, ale szczęśliwie poza głównym" content " div. co wydaje się dziwne, ale jest tam, gdzie chcę).

 1
Author: David B,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-07 00:29:05

Chcę tylko dodać-większość innych odpowiedzi działa dobrze dla mnie; jednak zajęło dużo czasu, aby je uruchomić!

To dlatego, że ustawienie height: 100% tylko podnosi wysokość div rodzica!

Więc jeśli cały html (wewnątrz ciała) wygląda następująco: 

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

Wtedy będzie dobrze: 

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

...jako "posiadacz" podniesie jego wysokość bezpośrednio z "ciała".

Chwała boli mnie głowa, której odpowiedź była tą, którą dostałem do pracy!

Jednak. Jeśli twój html jest bardziej zagnieżdżony (ponieważ jest tylko elementem całej strony, lub znajduje się w określonej kolumnie, itd.), musisz upewnić się, że każdy element ma również height: 100% ustawione na div. W przeciwnym razie informacja o wysokości zostanie utracona między "body" a "holder".

Na przykład, gdzie dodałem klasę "pełna wysokość" do każdego div, aby upewnić się, że wysokość dostaje aż do naszego nagłówka / ciała / stopki elementy: 

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

I pamiętaj, aby ustawić wysokość na pełnej wysokości klasy w css: 

#full-height{
    height: 100%;
}
To naprawiło moje problemy!
 1
Author: Tim L,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-18 14:18:49 
position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
 1
Author: Praveen Kundu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-11-08 09:45:30

Jeśli masz stopkę o stałej wysokości (na przykład 712px) możesz to zrobić z js tak: 

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}
 0
Author: George Carlin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-10 13:48:35

Użyj klasy fixed-bottom Bootstrap 

<div id="footer" class="fixed-bottom w-100">
 -2
Author: Gowtham Sooryaraj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-10-05 14:13:44