Niech div pozostanie na dole zawartości strony przez cały czas, nawet gdy są paski przewijania

261

Proszę spojrzeć na ten link, chcę odwrotnie: gdy zawartość przepełnia się do pasków przewijania, chcę, aby moja stopka zawsze znajdowała się na pełnym dole strony, na przykład Przepełnienie stosu.

Mam div z id="footer"tym CSS:

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

Ale wszystko, co robi, to przejście do dolnej części rzutni i pozostaje tam, nawet jeśli przewiniesz w dół, więc nie będzie już na dole.

Wizerunek: Przykład

Przepraszam, jeśli nie wyjaśniono, nie chcę, aby to zostało naprawione, tylko aby znajdowało się na samym dole całej zawartości.

css positioning css-position footer H Bellamy
źródło

1

spróbuj position:fixed, choć nie będzie to najlepszy sposób

redDevil

Wypróbuj pozycję: krewny na ciele.

1

nie zamknąłeś swojego; po pozycji: absolutna. w przeciwnym razie działałoby idealnie!

AlexHighHigh

545

Właśnie to position: fixedzostało zaprojektowane do:

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

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

Joseph Silber
źródło

65

To rozwiązanie nie jest dobre w 90% przypadków. jeśli zmienisz rozmiar okna, stopka nałoży się na inną zawartość i nie zatrzyma się na końcu treści

vsync

10

@aroth, ponieważ są to dwa zupełnie różne rozwiązania. To rozwiązanie utrzymuje stopkę na dole wizualnego obszaru ekranu przez cały czas. Alternatywne rozwiązanie utrzymuje stopkę na dole ekranu lub na dole strony, w zależności od tego, która z nich jest większa - o to poprosił pytający.

Moja głowa boli

6

@MyHeadHurts - Masz absolutną rację. Po udzieleniu odpowiedzi zdałem sobie sprawę, że nie tego chciał OP, ale zostawiłem to tutaj osobom szukającym prostej, stałej stopki. Z komentarzy (i głosów) wynika, że wiele osób zmaga się z tą podstawową funkcją CSS.

Joseph Silber,

1

@MyHeadHurts - Wystarczająco sprawiedliwe, choć dla moich pieniędzy oba są w zasadzie takie same. Treść przewija się pod fixedstopką, gdy jest wystarczająco dużo treści, aby to zrobić. To mi wystarczy. Oczywiście widzę, jak bardzo duże stopki lubią to, co mają na przepełnieniu stosu, nie działałyby dobrze z tym fixedpodejściem, ale dla podstawowej stopki o jednym wierszu takie podejście działa moim zdaniem.

aroth

@aroth Zgadzam się, to dobre rozwiązanie i wszystko zależy od tego, czego chcesz. Właśnie wskazałem, dlaczego jedno rozwiązanie jest bardziej skomplikowane od drugiego -> nie robią tego samego.

Moja głowa boli

187

Niestety nie można tego zrobić bez dodania dodatkowego kodu HTML i polegania na tym, że jeden kawałek CSS polega na innym.

HTML

Najpierw trzeba owinąć header, footera #bodydo #holderdiv:

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

CSS

Następnie ustaw height: 100%na htmli body(rzeczywiste ciało, a nie #bodydiv), aby upewnić się, że możesz ustawić minimalną wysokość jako procent elementów potomnych.

Teraz ustaw min-height: 100%na #holderdiv, aby wypełniał zawartość ekranu i użyj, position: absoluteaby usiąść stopkę na dole #holderdiv.

Niestety, musisz zastosować padding-bottomsię do #bodydiv, który jest tej samej wysokości co, footeraby upewnić się, że footernie 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 roboczy, krótkie ciało: http://jsfiddle.net/ELUGc/

Przykład roboczy, długi korpus: http://jsfiddle.net/ELUGc/1/

Boli mnie głowa
źródło

nie rozumiem dlaczego szerokość: 100%; jest wymagane

Somnath Kharat

4

@ s TACKoVERFLOW - Jeśli nie określisz jednego width lub obu, left a rightnastępnie wartości zostaną ustawione na, autoa element zostanie zawinięty, aby pasował do jego zawartości. Określanie width: 100% albo left: 0 i right:0zapewnia, że absolutnie umieszczony elementem zajmuje całą szerokość elementu kontenera

Boli mnie głowa

Szukałem podobnego zachowania, ale w moim przypadku #body div jest zmienny, mówiąc „float: left”. Przykład krótkiego ciała działa, ale przykład długiego ciała nie. Wszelkie sugestie, w jaki sposób mogę uzyskać pożądane zachowanie za pomocą float na #body div.

Jatin

@Ian powiedział w odpowiedzi, ponieważ nie miał wystarczającej liczby przedstawicieli, aby skomentować: Jeśli masz problemy w asp.net z odpowiedzią z „My Head Hurts” - musisz dodać „wysokość: 100%” do głównej wygenerowany tag FORM, a także HTML i BODY, aby to zadziałało.

msouth

Jeśli starasz się uzyskać to do pracy wewnątrz div zamiast wewnątrz całego ciała, upewnij się określić height=100%na wszystkich swoich elementów zawierających, w tym <form>elementów.

Ben Caine,

13

Właśnie opracowałem inne rozwiązanie, ponieważ powyższy przykład ma dla mnie błąd (gdzieś błąd). Odmiana 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, ale jest dopuszczalne, aby stara przeglądarka przewijała 30 pikseli, aby wyświetlić stopkę

plunker

Anonimowy
źródło

5

Zdaję sobie sprawę, że mówi się, aby nie używać tego do „odpowiadania na inne odpowiedzi”, ale niestety nie mam wystarczającej liczby przedstawicieli, aby dodać komentarz do odpowiedniej odpowiedzi (!), Ale ...

Jeśli masz problemy w asp.net z odpowiedzią z „My Head Hurts” - musisz dodać „wysokość: 100%” do generowanego głównego tagu FORM oraz tagów HTML i BODY, aby to zadziałało.

Ian
źródło

4

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

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

AlexHighHigh
źródło

3

Chciałbym skomentować, gdybym mógł, ale nie mam jeszcze uprawnień, więc opublikuję podpowiedź w odpowiedzi na nieoczekiwane zachowanie na niektórych urządzeniach z Androidem:

Pozycja: Naprawiono działa tylko w systemie Android 2.1 do 2.3 za pomocą następującego metatagu:

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

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

Tarciso Junior
źródło

2

Jest to intuicyjne rozwiązanie za pomocą polecenia rzutni, które ustawia minimalną wysokość do wysokości rzutni minus wysokość stopki.

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

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

Obromios
źródło

1

Rozwiązałem podobny problem, umieszczając całą moją główną treść w dodatkowym znaczniku div (id = „outer”). Następnie przeniosłem tag div z id = "footer" poza ten ostatni "zewnętrzny" tag div. Użyłem CSS do określenia wysokości „zewnętrznego” i podałem szerokość i wysokość „stopki”. Użyłem również CSS, aby określić lewy margines i prawy margines „stopki” jako auto. Rezultat jest taki, że stopka jest mocno osadzona na dole mojej strony i przewija się wraz ze stroną (chociaż nadal pojawia się wewnątrz „zewnętrznego” div, ale na szczęście poza głównym div „content”, co wydaje się dziwne, ale jest gdzie tego chcę).

David B.
źródło

1

Chcę tylko dodać - większość pozostałych odpowiedzi działała dla mnie dobrze; zajęło im jednak dużo czasu!

Jest tak, ponieważ ustawienie height: 100%podnosi tylko 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 następujące będą w porządku:

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

... ponieważ „uchwyt” podnosi wysokość bezpośrednio z „ciała”.

Uznanie dla mojej głowy boli, której odpowiedzią była ta, w której znalazłem się w pracy!

Jednak. Jeśli twój HTML jest bardziej zagnieżdżony (ponieważ jest to tylko element całej strony lub jest w określonej kolumnie itp.), Musisz upewnić się, że każdy element zawieraheight: 100% ustawiony element div. W przeciwnym razie informacje o wysokości zostaną utracone między „ciałem” a „uchwytem”.

Np. Poniższe, w którym dodałem klasę „pełnej wysokości” do każdego elementu div, aby upewnić się, że wysokość sięga aż do naszych elementów nagłówka / treści / stopki:

<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ść w klasie pełnej wysokości w css:

#full-height{
    height: 100%;
}

To naprawiło moje problemy!

Tim L.
źródło

0

jeśli masz stopkę o stałej wysokości (na przykład 712px), możesz to zrobić za pomocą js:

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

George Carlin
źródło

0

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

Praveen Kundu
źródło

Opisz w swojej odpowiedzi, jaki był problem i jak ten fragment rozwiąże go, aby pomóc innym zrozumieć tę odpowiedź

FZs,

-2

użyj klasy bootstrap o stałym dnie

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

Gowtham Sooryaraj
źródło

Nic nie wskazuje na to, że OP używa Bootstrap.

TylerH,

Niech div pozostanie na dole zawartości strony przez cały czas, nawet gdy są paski przewijania

Odpowiedzi: