Fai rimanere div in fondo al contenuto della pagina per tutto il tempo anche quando ci sono barre di scorrimento

262

Si prega di guardare quel link, voglio il contrario: Quando il contenuto overflow per le barre di scorrimento, voglio che il mio piè di pagina per essere sempre al completo in fondo alla pagina, come Stack Overflow.

Ho un div con id="footer"e questo CSS:

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

Ma tutto ciò che fa è andare nella parte inferiore della finestra e rimane lì anche se scorri verso il basso, quindi non è più in fondo.

Immagine: Examlple

Scusate se non chiarito, non voglio che sia riparato, solo che sia nella parte inferiore effettiva di tutto il contenuto.

— H Bellamy
fonte

1

prova position:fixed, anche se non sarà esattamente il modo migliore per farlo

— redDevil

Prova posizione: parente sul corpo.

1

non hai chiuso il tuo; dopo la posizione: assoluto. altrimenti avrebbe funzionato perfettamente!

— AlexHighHigh

546

Questo è esattamente ciò per cui è position: fixedstato progettato:

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

Ecco il violino: http://jsfiddle.net/uw8f9/

— Joseph Silber
fonte

65

Tale soluzione non è buona per il 90% dei casi. se ridimensionate la finestra, il piè di pagina sovrapporrà altri contenuti e non si fermerà alla fine dei vostri contenuti

— vsync,

10

@aroth perché sono due soluzioni totalmente diverse. Questa soluzione manterrà sempre il piè di pagina nella parte inferiore dell'area visiva dello schermo. La soluzione alternativa mantiene il piè di pagina nella parte inferiore dello schermo o nella parte inferiore della pagina, a seconda di quale è più grande - che era ciò che il richiedente ha richiesto.

— Mi fa male la testa il

6

@MyHeadHurts - Hai assolutamente ragione. Dopo aver risposto, mi sono reso conto che non era questo ciò che voleva l'OP, ma l'ho lasciato qui per le persone in cerca di un semplice piè di pagina fisso. Dai commenti (e dai voti) sembra che molte persone stiano lottando con questa elementare funzionalità CSS.

— Joseph Silber,

1

@MyHeadHurts - Abbastanza giusto, anche se per i miei soldi sono ancora sostanzialmente gli stessi. Il contenuto scorre sotto il fixedpiè di pagina, quando c'è abbastanza contenuto per farlo. È abbastanza buono per me. Certo, posso vedere come piè di pagina molto grandi come quello che hanno su StackOverflow non funzionerebbero bene con l' fixedapproccio, ma per un piè di pagina di una riga questo approccio funziona bene secondo me.

— aroth

@aroth Sono d'accordo, questa è una buona soluzione e tutto dipende da cosa vuoi. Stavo solo sottolineando perché una soluzione era più complicata dell'altra -> non fanno la stessa cosa.

— Mi fa male la testa il

188

Sfortunatamente non puoi farlo senza aggiungere un po 'di HTML in più e avere un pezzo di CSS basato su un altro.

HTML

Per prima cosa devi avvolgere il tuo header, footere #bodyin un #holderdiv:

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

CSS

Quindi imposta height: 100%su htmle body(corpo reale, non il #bodydiv) per assicurarti di poter impostare l'altezza minima come percentuale sugli elementi figlio.

Ora imposta min-height: 100%il #holderdiv in modo che riempia il contenuto dello schermo e utilizzalo position: absoluteper posizionare il piè di pagina nella parte inferiore del #holderdiv.

Sfortunatamente, devi fare domanda padding-bottomal #bodydiv che abbia la stessa altezza del footerper assicurarti che footernon si trovi sopra qualsiasi contenuto:

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

Esempio di lavoro, corpo breve: http://jsfiddle.net/ELUGc/

Esempio funzionante, long body: http://jsfiddle.net/ELUGc/1/

— Mi fa male la testa
fonte

non riesco a capire perché larghezza: 100%; è richiesto

— Somnath Kharat il

4

@sTACKoVERFLOW - Se non si specifica uno width o entrambi left e rightquindi i valori sono impostati su autoe l'elemento andrà a capo per adattarsi al suo contenuto. Specificando width: 100% o left: 0 e si right:0assicura che l'elemento posizionato in modo assoluto occupi l'intera larghezza dell'elemento contenitore

— My Head Hurts,

Stavo cercando un comportamento simile, ma nel mio caso il div #body è fluttuato, ad esempio "float: left". L'esempio di corpo corto funziona, ma l'esempio di corpo lungo no. Qualche suggerimento su come posso ottenere il comportamento desiderato usando float sul div #body.

— Jatin,

@Ian ha detto, in una risposta perché non aveva abbastanza rappresentante per commentare: se hai problemi in asp.net con la risposta di 'My Head Hurts' - devi aggiungere 'height: 100%' al main generato tag FORM così come tag HTML e BODY affinché questo funzioni.

— msouth,

Se si sta cercando di ottenere questo al lavoro all'interno di un div piuttosto che all'interno di tutto il corpo, assicurarsi di specificare height=100%su tutti i vostri elementi che contengono, tra <form>gli elementi.

— Ben Caine,

13

Ho appena escogitato un'altra soluzione, come nell'esempio precedente ho bug (errore da qualche parte) per me. Variazione dalla risposta selezionata.

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

per layout html

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

Bene, in questo modo non supporta il vecchio browser, tuttavia è accettabile per il vecchio browser scorrere verso il basso 30px per visualizzare il piè di pagina

plunker

— Anonimo
fonte

5

Mi rendo conto che dice di non usarlo per "rispondere ad altre risposte" ma sfortunatamente non ho abbastanza rappresentante per aggiungere un commento alla risposta appropriata (!) Ma ...

Se si verificano problemi in asp.net con la risposta di "My Head Hurts", è necessario aggiungere "height: 100%" al tag FORM generato principale e ai tag HTML e BODY affinché funzioni.

— Ian
fonte

4

Non hai chiuso il tuo; dopo la posizione: assoluto. Altrimenti il tuo codice sopra avrebbe funzionato perfettamente!

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

— AlexHighHigh
fonte

3

Vorrei commentare se potessi, ma non ho ancora i permessi, quindi posterò un suggerimento come risposta, per comportamenti imprevisti su alcuni dispositivi Android:

Posizione: risolto funziona solo in Android da 2.1 a 2.3 usando il seguente meta tag:

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

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

— Tarciso Junior
fonte

2

Questa è una soluzione intuitiva che utilizza il comando viewport che imposta solo l'altezza minima all'altezza del viewport meno l'altezza del piè di pagina.

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

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

— Obromios
fonte

1

Ho risolto un problema simile inserendo tutti i miei contenuti principali in un tag div aggiuntivo (id = "esterno"). Ho quindi spostato il tag div con id = "footer" al di fuori di quest'ultimo tag "esterno". Ho usato CSS per specificare l'altezza di "esterno" e ho specificato la larghezza e l'altezza di "piè di pagina". Ho anche usato CSS per specificare il margine sinistro e il margine destro di "piè di pagina" come auto. Il risultato è che il piè di pagina si trova saldamente nella parte inferiore della mia pagina e scorre anche con la pagina (anche se, appare ancora all'interno del div "esterno", ma felicemente al di fuori del div "contenuto" principale, che sembra strano, ma è dove lo voglio).

— David B
fonte

1

Voglio solo aggiungere - la maggior parte delle altre risposte ha funzionato bene per me; tuttavia, ci è voluto molto tempo per farli funzionare!

Questo perché l'impostazione height: 100%prende solo l'altezza del div del genitore!

Quindi, se l'intero HTML (all'interno del corpo) è simile al seguente:

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

Quindi andrà bene:

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

... come "titolare" prenderà la sua altezza direttamente da "corpo".

Complimenti a My Head Hurts, la cui risposta è stata quella che ho finito per mettermi al lavoro!

Però. Se il tuo html è più nidificato (perché è solo un elemento dell'intera pagina, o è all'interno di una determinata colonna, ecc.) Allora devi assicurarti che ogni elemento contenente sia height: 100%impostato anche sul div. Altrimenti, le informazioni sull'altezza andranno perse tra "corpo" e "supporto".

Ad esempio, in cui ho aggiunto la classe "full height" a ogni div per assicurarmi che l'altezza scenda fino ai nostri elementi 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>

E ricorda di impostare l'altezza sulla classe a tutta altezza nel CSS:

#full-height{
    height: 100%;
}

Ciò ha risolto i miei problemi!

— Tim L
fonte

0

se hai un piè di pagina ad altezza fissa (ad esempio 712px) puoi farlo con js in questo modo:

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

— George Carlin
fonte

0

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

— Praveen Kundu
fonte

Descrivi nella tua risposta qual è stato il problema e come lo risolverà questo frammento, per aiutare gli altri a capire questa risposta

— FZ

-2

usa la classe bootstrap a fondo fisso

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

— Gowtham Sooryaraj
fonte

Non ci sono indicazioni che OP stia usando Bootstrap.

— TylerH,