Come si ottiene il piè di pagina in fondo a una pagina Web?

Ho un semplice layout a 2 colonne con un piè di pagina che cancella sia il div destro che quello a sinistra nel mio markup. Il mio problema è che non riesco a mettere il piè di pagina in fondo alla pagina in tutti i browser. Funziona se il contenuto spinge verso il basso, ma non è sempre così.

Aggiornare:

Non funziona correttamente in Firefox. Vedo una striscia di colore di sfondo sotto il piè di pagina quando non c’è abbastanza contenuto nella pagina per spingere il piè di pagina fino in fondo alla finestra del browser. Sfortunatamente, questo è lo stato predefinito della pagina.

Per ottenere un piè di pagina appiccicoso:

  1. Avere un

    con class="wrapper" per il tuo contenuto.

  2. Subito prima della chiusura del wrapper posiziona

    .

  3. Subito dopo la chiusura di del wrapper posiziona

    .

 * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ } .footer, .push { height: 142px; /* .push must be the same height as .footer */ } 

Usa le unità CSS vh!

Probabilmente il modo più ovvio e non hacky di fare un footer appiccicoso sarebbe quello di utilizzare le nuove unità di viewport css .

Prendiamo ad esempio il seguente semplice markup:

 
header goes here
This page has little content
This is my footer

Se l’intestazione è alta 80px e il piè di pagina è alto 40px, possiamo creare il nostro piè di pagina appiccicoso con una singola regola sul contenuto div:

 .content { min-height: calc(100vh - 120px); /* 80px header + 40px footer = 120px */ } 

Il che significa: lasciare che l’altezza del contenuto div sia almeno del 100% dell’altezza del viewport meno le altezze combinate dell’intestazione e del piè di pagina.

Questo è tutto.

 * { margin:0; padding:0; } header { background: yellow; height: 80px; } .content { min-height: calc(100vh - 120px); /* 80px header + 40px footer = 120px */ background: pink; } footer { height: 40px; background: aqua; } 
 
header goes here
This page has little content
This is my footer

Piè di pagina appiccicoso con display: flex

Soluzione ispirata al piè di pagina appiccicoso di Philip Walton .

Spiegazione

Questa soluzione è valida solo per :

  • Chrome ≥ 21.0
  • Firefox ≥ 20.0
  • Internet Explorer ≥ 10
  • Safari ≥ 6.1

Si basa sul display flex , sfruttando la proprietà flex-grow , che consente a un elemento di crescere in altezza o larghezza (quando la flow-direction del flow-direction è impostata rispettivamente su column o row ), per occupare lo spazio extra nel contenitore .

Faremo leva anche sull’unità vh , dove 1vh è definito come :

1/100 ° dell’altezza del viewport

Quindi un’altezza di 100vh è un modo conciso per dire ad un elemento di coprire l’altezza di tutta la finestra.

Ecco come struttureresti la tua pagina web:

 ----------- body ----------- ---------------------------- ---------- footer ---------- ---------------------------- 

Per far aderire il piè di pagina alla parte inferiore della pagina, si desidera che lo spazio tra il corpo e il piè di pagina cresca quanto basta per spingere il piè di pagina nella parte inferiore della pagina.

Pertanto il nostro layout diventa:

 ----------- body ----------- ---------------------------- ---------- spacer ---------- < - This element must grow in height ---------------------------- ---------- footer ---------- ---------------------------- 

Implementazione

 body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; } .spacer { flex: 1; } /* make it visible for the purposes of demo */ .footer { height: 50px; background-color: red; } 
  
Hello World!

Puoi usare position: absolute following per mettere il footer in fondo alla pagina, ma assicurati che le tue 2 colonne abbiano il margin-bottom appropriato in modo che non vengano mai occluse dal footer.

 #footer { position: absolute; bottom: 0px; width: 100%; } #content, #sidebar { margin-bottom: 5em; } 

Ecco una soluzione con jQuery che funziona come un fascino. Controlla se l’altezza della finestra è maggiore dell’altezza del corpo. Se lo è, cambia la parte superiore del margine del footer per compensare. Testato su Firefox, Chrome, Safari e Opera.

 $( function () { var height_diff = $( window ).height() - $( 'body' ).height(); if ( height_diff > 0 ) { $( '#footer' ).css( 'margin-top', height_diff ); } }); 

Se il tuo footer ha già un margine superiore (di 50 pixel, ad esempio) dovrai modificare l’ultima parte per:

 css( 'margin-top', height_diff + 50 ) 

Imposta il CSS per #footer su:

 position: absolute; bottom: 0; 

Dovrai quindi aggiungere un padding o margin alla parte inferiore della tua #sidebar e #sidebar per abbinare l’altezza di #footer o quando si sovrappongono, il #footer li coprirà.

Inoltre, se ricordo bene, IE6 ha un problema con il bottom: 0 CSS. Potrebbe essere necessario utilizzare una soluzione JS per IE6 (se ti interessa IE6 che è).

Usa il posizionamento assoluto e lo z-index per creare un div footy adesivo a qualsiasi risoluzione usando i seguenti passi:

  • Creare un div footer con position: absolute; bottom: 0; position: absolute; bottom: 0; e l’altezza desiderata
  • Imposta il riempimento del piè di pagina per aggiungere spazi bianchi tra il fondo del contenuto e il fondo della finestra
  • Crea un contenitore div che avvolge il contenuto del corpo con position: relative; min-height: 100%; position: relative; min-height: 100%;
  • Aggiungi il riempimento inferiore al div contenuto principale che è uguale all’altezza più il riempimento del piè di pagina
  • Imposta l’ z-index del piè di pagina maggiore del div contenitore se il piè di pagina è troncato

Ecco un esempio:

  < !doctype html>   Sticky Footer     
hello

Una soluzione simile a @gcedo ma senza la necessità di aggiungere un contenuto intermedio per spingere il piè di pagina verso il basso. Possiamo semplicemente aggiungere margin-top:auto al footer e verrà spinto nella parte inferiore della pagina indipendentemente dalla sua altezza o dall’altezza del contenuto sopra.

 body { display: flex; flex-direction: column; min-height: 100vh; margin:0; } .content { padding: 50px; background: red; } .footer { margin-top: auto; padding:10px; background: green; } 
 
some content here
some content

Prova a mettere un contenitore div (con overflow: auto) attorno al contenuto e alla barra laterale.

Se ciò non funziona, hai qualche screenshot o link di esempio in cui il footer non viene visualizzato correttamente?

Una soluzione sarebbe quella di impostare l’altezza minima per le scatole. Sfortunatamente sembra che non sia supportato da IE (sorpresa).

Nessuna di queste soluzioni CSS funziona correttamente con il ridimensionamento dinamico dei contenuti (almeno su firefox e Safari), ad esempio, se si dispone di uno sfondo impostato sul contenitore div, la pagina e quindi ridimensiona (aggiungendo poche righe) la tabella all’interno del div, il il tavolo può sporgere dal fondo dell’area in stile, cioè puoi avere metà del tavolo in bianco su tema nero e metà del tavolo completo bianco perché sia ​​il colore del font che il colore dello sfondo sono bianchi. Fondamentalmente è inspiegabile con le pagine di themeroller.

Il layout multi-colonna div annidato è un brutto attacco e il div del corpo / contenitore al 100% di altezza minima per attaccare il piè di pagina è un brutto attacco.

L’unica soluzione senza script che funziona su tutti i browser che ho provato: una tabella molto più semplice / più corta con thead (per intestazione) / tfoot (per footer) / tbody (td’s per qualsiasi numero di colonne) e 100% di altezza. Ma questo ha percepito svantaggi semantici e SEO (i tacchi devono apparire prima di te. I ruoli ARIA possono comunque aiutare i motori di ricerca decenti).

CSS:

  #container{ width: 100%; height: 100vh; } #container.footer{ float:left; width:100%; height:20vh; margin-top:80vh; background-color:red; } 

HTML:

  

Questo dovrebbe fare il trucco se stai cercando un footer reattivo allineato nella parte inferiore della pagina, che mantiene sempre un margine superiore dell’80% dell’altezza del viewport.

Per questa domanda molte delle risposte che ho visto sono goffe, difficili da implementare e inefficienti quindi ho pensato di provarci e di inventare la mia soluzione, che è solo un po ‘di css e html

 html, body { height: 100%; margin: 0; } .body { min-height: calc(100% - 2rem); width: 100%; background-color: grey; } .footer { height: 2rem; width: 100%; background-color: yellow; } 
  
test as body

A volte mi sono battuto con questo e ho sempre trovato che la soluzione con tutti quei div all’interno di entrambi era una soluzione disordinata. Ho solo scherzato un po ‘, e personalmente ho scoperto che questo funziona e sicuramente è uno dei modi più semplici:

 html { position: relative; } html, body { margin: 0; padding: 0; min-height: 100%; } footer { position: absolute; bottom: 0; } 

Quello che mi piace di questo è che non è necessario applicare altro HTML. Puoi semplicemente aggiungere questo CSS e poi scrivere il tuo HTML come se fosse

Molte persone hanno posto la risposta a questo semplice problema quassù, ma ho una cosa da aggiungere, considerando quanto sono stato frustrato finché non ho capito cosa stavo facendo male.

Come già detto, il modo più semplice per farlo è come …

 html { position: relative; min-height: 100%; } body { background-color: transparent; position: static; height: 100%; margin-bottom: 30px; } .site-footer { position: absolute; height: 30px; bottom: 0px; left: 0px; right: 0px; } 

Tuttavia la proprietà non menzionata nei post, presumibilmente perché di solito è predefinita, è la posizione: statica sul tag del corpo. La posizione relativa non funzionerà!

Il mio tema wordpress aveva scavalcato la visualizzazione predefinita del corpo e mi ha confuso per un tempo odiosamente lungo.

Un vecchio thread che conosco, ma se stai cercando una soluzione retriggers, questa aggiunta di jQuery aiuterà:

 $(window).on('resize',sticky); $(document).bind("ready", function() { sticky(); }); function sticky() { var fh = $("footer").outerHeight(); $("#push").css({'height': fh}); $("#wrapper").css({'margin-bottom': -fh}); } 

La guida completa può essere trovata qui: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

Ho creato una libreria molto semplice https://github.com/ravinderpayal/FooterJS

È molto semplice in uso. Dopo aver incluso la libreria, chiama questa riga di codice.

 footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER")); 

I piè di pagina possono essere modificati dynamicmente richiamando la funzione precedente con diversi parametri / id.

 footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER")); 

Nota: – Non devi modificare o aggiungere alcun CSS. La libreria è dynamic, il che implica che anche se lo schermo viene ridimensionato dopo aver caricato la pagina, esso ripristinerà la posizione del piè di pagina. Ho creato questa libreria, perché CSS risolve il problema per un po ‘, ma quando le dimensioni del display cambiano in modo significativo, da desktop a tablet o viceversa, si sovrappongono o non rimangono più appiccicose.

Un’altra soluzione è CSS Media Queries, ma è necessario scrivere manualmente diversi stili CSS per diverse dimensioni delle schermate mentre questa libreria funziona automaticamente ed è supportata da tutti i browser di supporto JavaScript di base.

Modifica la soluzione CSS:

 @media only screen and (min-height: 768px) {/* or height/length of body content including footer*/ /* For mobile phones: */ #footer { width: 100%; position:fixed; bottom:0; } } 

Ora, se l’altezza del display è superiore alla lunghezza del contenuto, faremo il piè di pagina fissato in basso e in caso contrario, apparirà automaticamente nella parte finale del display poiché è necessario scorrere per visualizzare questo.

E, sembra una soluzione migliore di JavaScript / libreria uno.

Non stavo avendo fortuna con le soluzioni suggerite su questa pagina ma poi, finalmente, questo piccolo trucco ha funzionato. Lo includerò come un’altra ansible soluzione.

 footer { position: fixed; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } 

Soluzione Flexbox

Il layout flessibile è preferito per le altezze naturali di intestazione e piè di pagina. Questa soluzione flessibile è testata nei browser moderni e funziona davvero 🙂 in IE11.

Vedi JS Fiddle .

HTML

  
...
...
...

CSS

 html { height: 100%; } body { height: 100%; min-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0; display: flex; flex-direction: column; } main { flex-grow: 1; flex-shrink: 0; } header, footer { flex: none; } 

Per me il modo migliore per visualizzarlo (il piè di pagina) è quello di attaccare il fondo, ma non di coprire il contenuto tutto il tempo:

 #my_footer { position: static fixed; bottom: 0 } 

jQuery CROSS BROWSER CUSTOM PLUGIN – $ .footerBottom ()

Oppure usa jQuery come faccio io, e imposta l’altezza del tuo footer su auto o su fix , qualunque cosa tu voglia, funzionerà comunque. questo plugin usa i selettori jQuery per farlo funzionare, dovrai includere la libreria jQuery nel tuo file.

Ecco come si esegue il plugin. Importa jQuery, copia il codice di questo plugin jQuery personalizzato e importalo dopo l’importazione di jQuery! È molto semplice ed essenziale, ma importante.

Quando lo fai, tutto ciò che devi fare è eseguire questo codice:

 $.footerBottom({target:"footer"}); //as html5 tag 
. // You can change it to your preferred "div" with for example class "footer" // by setting target to {target:"div.footer"}

non è necessario posizionarlo all’interno dell’evento pronto per il documento. Funzionerà bene così com’è. Ricalcola la posizione del footer quando la pagina viene caricata e quando la finestra viene ridimensionata.

Ecco il codice del plugin che non devi capire. Basta sapere come implementarlo. Fa il lavoro per te. Tuttavia, se ti piace sapere come funziona, basta guardare attraverso il codice. Ho lasciato commenti per te.

 //import jQuery library before this script 
 // Import jQuery library before this script // Our custom jQuery Plugin (function($) { $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom(); var defaults = { target: "footer", container: "html", innercontainer: "body", css: { footer: { position: "absolute", left: 0, bottom: 0, }, html: { position: "relative", minHeight: "100%" } } }; options = $.extend(defaults, options); // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE $(options.target).css({ "position": options.css.footer.position, "left": options.css.footer.left, "bottom": options.css.footer.bottom, }); $(options.container).css({ "position": options.css.html.position, "min-height": options.css.html.minHeight, }); function logic() { var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like. }; // DEFINE WHEN TO RUN FUNCTION $(window).on('load resize', function() { // Run on page loaded and on window resized logic(); }); // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE // return this.each(function() { // this.checked = true; // }); // return this; }; })(jQuery); // End of plugin // USE EXAMPLE $.footerBottom(); // Run our plugin with all default settings for HTML5 
 /* Set your footer CSS to what ever you like it will work anyway */ footer { box-sizing: border-box; height: auto; width: 100%; padding: 30px 0; background-color: black; color: white; } 
    

Lorem ipsum...

Copyright 2009 Your name

Copyright 2009 Your name

Copyright 2009 Your name