Lega il piè di pagina in fondo alla pagina CSS. Come usare i CSS per spingere il piè di pagina nella parte inferiore della finestra del browser

Passiamo ad un esempio funzionante

Punto 4: dovrai disegnare con uno script.
Sembrerebbe semplice capire il terzo punto aggiungendo #layout (margin-top: -90px;) Ma ricorda che questo blocco potrebbe non esistere - viene soppresso da un banner cutter, o gli inserzionisti decideranno improvvisamente di non mostrarlo. Ci sono un certo numero di pagine del sito in cui non lo è. quindi dipendenza margine superiore da un'unità pubblicitaria è una cattiva idea. Molto meglio è metterlo dentro #disposizione- allora non interferirà con nulla.

Il primo punto è che affinché il footer inchiodato funzioni, è necessario posizionare il blocco footer sotto #disposizione... Tuttavia, usando javascript, puoi implementare altri schemi del footer inchiodato, ma in ogni caso hai bisogno di JS o del layout inizialmente corretto per farne a meno.

Visto che non possiamo essere più forti dell'ultimissimo site designer, che ha "incollato" il footer all'interno del contenuto, rimandiamo l'idea del corretto posizionamento del footer sul nostro sito futuro (che, quindi, sarà più "cool" Habr!), E sezionare Habr con javascript (script utente) negli stati corretti. (Diciamo subito che la colpa non è del layout designer o del switchman, ma la tipologia del sito, ovviamente, determina la decisione strategica della direzione del progetto.) In questo modo non raggiungeremo l'ideale, perché nei primi o due secondi durante il processo di caricamento, la pagina sarà con il layout sbagliato. Ma il concetto e la capacità di superare il sito più popolare nel mondo IT sono importanti per noi.

Pertanto, nel posto giusto nello script (all'inizio, alla fine del caricamento della pagina), scriveremo il trasferimento dell'annuncio DOM e dei blocchi di piè di pagina nei punti richiesti. (Prepariamoci al fatto che a causa degli script utente, la soluzione sarà più complicata di una pulita.)
var dQ = function (q) (return document.querySelector (q);) // in breve var topL = dQ ("# topline"), lay = dQ ("# layout"), foot = dQ ("# footer" ); if (topL && lay) // banner - all'interno del blocco di contenuto lay.insertBefore (topL, lay.firstChild); if (lay && foot && lay.nextSibling) // avvolge il piè di pagina lay.parentNode.insertBefore (footer, lay.nextSibling);
Mettiamo i blocchi al loro posto - ora resta da assegnare le proprietà necessarie agli elementi. L'altezza del piè di pagina dovrà essere impostata esattamente, semplicemente perché la conosciamo già quando lo script utente è in vigore (la fine del caricamento della pagina). A causa del punto di innesco dello script utente, come accennato in precedenza, è inevitabile un salto nella visualizzazione del piè di pagina della pagina. Puoi provare a fare una "buona faccia" ma con un "brutto gioco"? Per che cosa? Il "brutto gioco" del sito ti consente di creare un concetto senza super-sforzi, che sarà sufficiente per valutare la qualità e non sarà necessario se "giochi correttamente" al tuo progetto.
if (piede) (// block aligner

Con questi pezzi di codice, saremo in grado di vedere il piè di pagina inchiodato nello script utente (dopo averlo saltato giù) e comprendere appieno come costruire il layout di pagina. È spiacevole utilizzare il design che rimbalza su base giornaliera, quindi si consiglia di farlo esclusivamente per dimostrazione e test. Nello script utente di HabrAjax, ho installato uno script simile, chiudendolo con l'impostazione "underFooter" (seleziona la casella nell'elenco delle impostazioni prima di "inchiodato al piè di pagina inferiore"), a partire dalla versione 0.883_2012-09-12.

Il piè di pagina inchiodato influisce sulla necessità di aggiornare gli stili ZenComment se installato? Sì, lo fa. A causa della complessa catena di priorità di stile, in cui gli stili inseriti dallo script utente hanno la priorità più bassa, ho dovuto modificare leggermente gli stili utente per opportunità lavorare con un piè di pagina inchiodato. Se non aggiorni gli stili utente (fino a 2.66_2012-09-12 +), il piè di pagina non funzionerà in modo accurato.

Bloccare articolo_rotato (tre post popolari del passato) sembra più logico nel piè di pagina, quindi in uno script reale viene anche spostato nel piè di pagina.

Il secondo punto (dall'elenco delle imperfezioni nel layout) - ragionamento puramente per Habr (non si applicano allo script utente e ripetono parzialmente i precedenti).

Le pagine hanno un problema che impedisce loro di creare un piè di pagina inchiodato in puro CSS: un'altezza del piè di pagina non definita basata sulle dimensioni dei caratteri predefinite del browser. Per implementare un piè di pagina in CSS, è necessario scegliere le altezze relative dei caratteri, ma potrebbero non funzionare se i caratteri forniti non sono disponibili sul computer dell'utente. Pertanto, la soluzione dovrebbe includere un javascript in grado di adattare le transizioni alla posizione approssimativa del piè di pagina a quella esatta. Oppure, dopo aver esaminato l'accettabilità della soluzione realizzata in script utente su piattaforme diverse, eseguire un'installazione calcolata del piè di pagina inchiodato: le prime osservazioni mostrano che la soluzione è pratica.

Conclusione: puoi organizzare completamente il layout su Habré, ma per questo hai bisogno di un designer di layout che capisca chiaramente il comportamento del layout e metta i blocchi nell'ordine corretto. (Ora il piè di pagina e il banner in alto sono "nel posto sbagliato" e non in modo che siano solo stili per ottenere un piè di pagina inchiodato.) Puoi fare a meno di JS se imposti l'altezza del piè di pagina in unità relative, prendendo un po' di margine per il carattere incertezza.

Implementazione

Fatti sul comportamento di implementazione

1) Firefox - mancanza inaspettata di salti di piè di pagina. È strano che non siano presenti: il rendering avviene dopo aver posizionato il piè di pagina in basso.

2) Chrome - ha sorpreso con uno "scorrimento errante" - gli spazi vuoti in basso vengono aggiunti alla pagina con un periodo di una volta al secondo - sta succedendo qualcosa di sbagliato con il calcolo delle altezze. Si tratta scrivendo html, body (height: 100%) in userstyle, ma senza garanzie che funzionerà sempre. È più sicuro controllare se il documento non supera l'altezza della finestra e, in caso contrario, spostare il piè di pagina, altrimenti nulla. Con il salto: tutto è in ordine, lo è.

3) Opera - nessun salto (v. 12.02) al caricamento della prima pagina, ma una ricarica frettolosa potrebbe mostrare un salto a piè di pagina. Altrimenti, conduce non meno correttamente di Fx.

Bene, dovrai insegnare in modo speciale a Chrome a comportarsi correttamente (con uno script) e in questo modulo distribuire la versione per la revisione. Pertanto, il sito nello script utente è un po' più complicato di quello indicato nell'articolo.

Va ricordato che questa non è un'implementazione a tutti gli effetti: non tiene conto, ad esempio, dei casi di ridimensionamento della finestra da parte dell'utente. Puoi anche trovare rare (in pratica) combinazioni di modifica dell'altezza del piè di pagina prima e dopo lo spostamento, in cui la logica inizierà a funzionare male senza causare inconvenienti. Gli svantaggi sono stati volutamente lasciati, perché si osserva l'equilibrio tra la complessità della revisione e la tempestività della soluzione.

Di conseguenza, si è rivelato uno schema di lavoro abbastanza praticabile, almeno per computer fissi veloci. Se viene rilevato un comportamento errato del piè di pagina, l'impostazione "underFooter" dovrebbe essere disabilitata.

Per quali pagine è utile?

Se usi gli stili utente ZenComment, riducono notevolmente l'altezza della pagina richiesta e lo script utente di HabrAjax potrebbe non mostrare alcune o tutte le barre laterali nella barra laterale. Pertanto, con script e stili, l'effetto di un piè di pagina non impostato è notevolmente più osservato. Pertanto, è logico che la correzione del piè di pagina sia apparsa per la prima volta in HabrAjax. Ma anche un sito normale ha un numero di pagine in cui sarebbe utile un piè di pagina inchiodato.

Ci sarà supporto?

Il comportamento del sito nell'ultimo anno mostra che gli sviluppatori (e quindi il management) hanno iniziato a implementare funzionalità che prima esistevano solo negli script utente e negli stili utente. Ad esempio, all'inizio dell'anno ho scritto, dove ho raccolto tanti piccoli auguri. Sei mesi dopo, sono tornato su di esso e ho notato con soddisfazione (proprio nel testo; puoi vedere l'"UPD" e le date) che una serie di funzionalità descritte come desideri erano già state implementate nel sito.

Successivamente, diamo un'occhiata alle "frecce" invece delle caselle per valutare i commenti. Sono apparsi negli utenti ("Prettifier") circa 3 anni fa e sono stati rilevati in ZenComment circa 2 anni fa. Circa 2-3 mesi fa, sono apparsi sul sito. Comincia a credere che dopo un po' le frecce si allargheranno un po', come si fa in ZenComment (una freccia a sinistra del numero, la seconda a destra), in modo da sbagliare di meno.

Ciao cari lettori del sito blog. Continuiamo l'argomento del layout dei blocchi, iniziato e continuato nei tre articoli precedenti. Fondamentalmente, siamo già riusciti a creare un layout di sito Web sia a due che a tre colonne e siamo persino riusciti a considerare le sfumature della creazione di un layout di gomma.

Inoltre, nei primi articoli sul layout del sito (), sono stati presi in considerazione alcuni concetti base del webmastering, senza capire quali sarebbe piuttosto difficile capirne le sfumature.

Quali sono i problemi con il layout del nostro sito web

Oggi cercheremo di risolvere un piccolo problema che potrebbe sorgere con il layout che abbiamo creato in precedenza. Molto spesso, questa situazione si verifica durante la visualizzazione su monitor di grandi dimensioni (alta risoluzione) e durante la visualizzazione di una pagina con una piccola quantità di informazioni.

In questo caso, può accadere che il piè di pagina non venga premuto nella parte inferiore dello schermo, ma si trovi quasi al centro dell'altezza, il che nella maggior parte dei casi sembrerà brutto e non esteticamente gradevole.

Tuttavia, a mio parere, è necessario premere il piè di pagina fino alla fine del layout del sito, e questo sarà particolarmente vero nel caso in cui l'altezza della pagina sia inferiore all'altezza dello schermo dell'utente. Può essere schematicamente rappresentato come segue:

Quelli. il comportamento corretto del footer per il caso di una piccola quantità di informazioni sulla pagina e una grande schermata utente sarebbe il seguente:

Per implementare ciò, è necessario eseguire una serie di manipolazioni con il codice del nostro layout. Inoltre, apporteremo modifiche non solo al file CSS di stile Style.css, ma anche a Index.html, che contiene il codice Html e forma i blocchi Div. Ma prima le cose principali.

Ad esempio, utilizzeremo il layout del sito a tre colonne creato in precedenza. In questo caso, Index.html avrà il seguente aspetto:

E le seguenti proprietà CSS sono state scritte nel file Style.css:

Body, html (margin: 0px; padding: 0px;) #maket (width: 800px; margin: 0 auto;) #header (background-color: # C0C000;) #left (background-color: # 00C0C0; width: 200px ; float: left;) #right (width: 200px; background-color: # FFFF00; float: right;) #content (background-color: # 8080FF; margin-left: 202px; margin-right: 202px;) #footer (colore di sfondo: # FFC0FF; chiaro: entrambi;)

Bene, il layout stesso assomigliava a questo:

Come puoi vedere, il piè di pagina non viene premuto fino in fondo e, quindi, non soddisfa i nostri requisiti (si trova sempre sotto la colonna più bassa), quindi dovrai apportare modifiche al codice. Lo stesso si può fare anche per i modelli a due colonne e in gomma. Il metodo è universale.

Come spingere un piè di pagina in fondo al layout di un sito web

Quindi, dobbiamo spostare il contenitore div con il piè di pagina nella parte inferiore dello schermo. Per fare ciò, devi prima impostare l'altezza dell'intera pagina pari al cento per cento (occuperà l'intero schermo). Ciò sarà necessario per ridimensionare al 100% anche il blocco principale con il layout.

L'intero contenuto della pagina del sito è posizionato nei tag Body di apertura e chiusura, quindi è necessario aggiungere un'altra proprietà CSS al tag Body in Style.css che imposta l'altezza al 100%:

Corpo, html (margine: 0px; padding: 0px; altezza: 100%;)

Ciò non influenzerà in alcun modo l'aspetto, ma ora il blog principale può essere esteso all'intera altezza dello schermo. Quelli. era una specie di fase preparatoria.

Proprietà CSS di base, se lo desideri, puoi guardare. Ora impostiamo il contenitore div che contiene il nostro intero layout a un'altezza minima del 100%:

Voglio anche evidenziarlo (div with id = "maket"). Per fare ciò, imposta un bordo utilizzando la proprietà Border() appropriata:

La proprietà border: solid 3px black imposta il contenitore su un solido bordo nero di 3px. Ciò ti consentirà di vedere visivamente che il contenitore con il layout si è esteso a tutta l'altezza dello schermo, anche con una piccola quantità di informazioni sulla pagina:

Ora dovremo spostare il blocco piè di pagina fuori dal contenitore generale e posizionarlo sotto, subito dopo quello generale. Cosa darà? E il fatto che, finalmente, si degnerà di scendere nel piè di pagina del layout, e non si aggrapperà, come prima, alla sua colonna più lunga. In questo caso, Index.html avrà il seguente aspetto:

Si noti che il blocco con il piè di pagina non si trova più all'interno del contenitore generale (maket), e quindi la sua larghezza non è più controllata dalle proprietà CSS impostate per il maket nel file di stile Style.css. Il piè di pagina si allungherà in larghezza per riempire l'intero schermo, ma sarà comunque già posizionato nella parte inferiore dello schermo, proprio sotto il blocco principale:

Ma ancora una volta sorge un problema, perché per vedere il piè di pagina, ora devi scorrere lo schermo nel browser (puoi vedere la barra di scorrimento nell'immagine sopra).

Si scopre che il contenitore principale (maket) occupa l'intera dimensione dello schermo in altezza (questo è determinato dalla proprietà min-height: 100%) e il piè di pagina si trova immediatamente dietro di esso e dovrai utilizzare lo scorrimento per visualizzarlo , che non è molto comodo e funzionale...

Una soluzione a questo problema consiste nell'impostare un margine negativo per il div del contenitore con un piè di pagina in modo che venga spostato verso l'alto di una distanza pari alla sua altezza. In questo caso, il contenitore del piè di pagina verrà eseguito su quello principale e si adatterà all'altezza della schermata del browser (ovvero, non sarà necessario utilizzare lo scorrimento per visualizzarlo).

Ma per impostare un margine negativo dall'alto, è necessario conoscere questa stessa altezza del piè di pagina, ma non lo sappiamo ancora.

Pertanto, impostiamo prima il contenitore contenente il piè di pagina su un'altezza impostando la proprietà appropriata in Style.css:

#footer (colore di sfondo: # FFC0FF; chiaro: entrambi; altezza: 50 px;)

E poi impostiamo un margine superiore negativo per un'altezza uguale alla sua altezza:

Ciò consentirà al piè di pagina di salire esattamente alla propria altezza e quindi di adattarsi alla schermata del browser (ora possiamo rimuovere il bordo: proprietà CSS nera solida 3px dalla regola del maket in modo che lo spessore del bordo non interferisca con l'intero layout lungo con il piè di pagina per adattarsi allo schermo in altezza):

Come puoi vedere, ora la barra di scorrimento non appare nel browser e tutto il nostro layout a tre colonne del sito basato sul layout a blocchi si inserisce in un'unica schermata (nel caso di una piccola quantità di informazioni sulla pagina) e ha un piè di pagina situato in fondo. Quello che, in effetti, dovevamo fare.

Inserisci il distanziatore e combatti Internet Explorer

Ma c'è un problema, che si manifesterà solo quando ci saranno più informazioni sulla pagina di layout e potrebbe verificarsi la seguente situazione:

Si scopre che potrebbe verificarsi una situazione in cui le informazioni in una delle colonne del layout si sovrappongono al piè di pagina, il che non sembrerà carino. Questo accade a causa del famigerato padding negativo che gli abbiamo impostato e che ha contribuito ad alzare il nostro footer con una collisione con il contenitore principale del layout.

Quelli. si scopre che due blocchi si trovano nella parte inferiore dello schermo, sovrapposti l'uno all'altro nell'area del piè di pagina.

La soluzione a questo problema è aggiungere un nuovo contenitore Div vuoto (il cosiddetto distanziatori) nel contenitore principale del nostro layout (maket), nel punto in cui si trovava precedentemente il blocco con il piè di pagina.

Impostando l'altezza di questo nuovo contenitore all'altezza del seminterrato, possiamo evitare la collisione delle informazioni dal contenitore principale con il blocco con il piè di pagina. Diamo a questo contenitore un ID () chiamato Rasporka e, di conseguenza, Index.html del nostro layout a tre colonne sarà simile a questo:

E in Style.css, per questo scriveremo (, che imposta l'altezza di questo contenitore spaziatore uguale all'altezza del piè di pagina:

#rasporka (altezza: 50px;)

Di conseguenza, il piè di pagina non verrà premuto dal basso verso le informazioni contenute nel contenitore principale (ad esempio il testo nella colonna più alta), ma su un'area pari al piè di pagina in altezza con un contenitore spaziatore che non contenere alcuna informazione.

In questo modo evitiamo collisioni e distorsioni nel nostro layout a tre colonne. Tutto sarà chiaro e bello (decoroso e nobile):

Come ho già detto sopra, la larghezza del piè di pagina dovrebbe ora essere impostata separatamente per noi, perché questo contenitore non fa più parte di quello principale. Per fare ciò, è necessario aggiungere proprietà aggiuntive per il piè di pagina al file CSS, consentendo di impostarne la larghezza e allinearlo orizzontalmente al centro dello schermo.

Ha senso impostare la larghezza uguale alla larghezza dell'intero layout utilizzando la proprietà Larghezza e l'allineamento orizzontale può essere eseguito allo stesso modo dell'intero layout su un layout a blocchi.

Pertanto, dovremo aggiungere proprietà aggiuntive per il piè di pagina ID:

#footer (colore di sfondo: # FFC0FF; chiaro: entrambi; altezza: 20 px; margine superiore: -20 pixel; larghezza: 800 pixel; margine sinistro: auto; margine destro: auto;)

Utilizzando la proprietà width: 800px imposta la larghezza a 800 pixel e utilizzando le due proprietà margin-left: auto e margin-right: auto imposta automaticamente il padding a sinistra e a destra del piè di pagina, per cui questi padding essere uguale e il nostro eroe sarà allineato al centro:

Beh, sembra che non ci sia più niente da migliorare, ma non c'era. Come sempre, il nostro browser preferito Internet Explorer 6 non capisce qualcosa dalle proprietà CSS che utilizziamo. In questo browser (e, forse, anche in altri vecchi), nonostante tutti i nostri sforzi, il piè di pagina non verrà premuto fino in fondo, ma rimarrà comunque nella colonna più alta del layout del sito.

Tutto ciò è dovuto al fatto che (non comprende la proprietà min-height: 100%, che abbiamo usato per impostare l'altezza minima della casella principale uguale all'altezza dello schermo.

Pertanto, per risolvere questo problema, dovremo applicare un cosiddetto hack che ci consente di spiegare (sulle dita) ai vecchi browser cosa fare. Prima dell'elenco delle proprietà CSS per maket, sarà necessario inserire la seguente combinazione:

* html #maket (altezza: 100%;)

Questa regola verrà applicata solo per il browser Internet Explorer 6, gli altri non la terranno in considerazione e la applicheranno.

Quindi, l'aspetto finale di Style.css con il piè di pagina premuto nella parte inferiore dello schermo sarà il seguente:

Body, html (margin: 0px; padding: 0px; height: 100%;) * html #maket (height: 100%;) #maket (width: 800px; margin: 0 auto; min-height: 100%;) # header (colore di sfondo: # C0C000;) #left (colore di sfondo: # 00C0C0; larghezza: 200 px; float: sinistro;) #right (larghezza: 200 px; colore di sfondo: # FFFF00; float: destro;) #content (colore di sfondo: # 8080FF; margine sinistro: 202 px; margine destro: 202 px;) #footer (colore di sfondo: # FFC0FF; chiaro: entrambi; altezza: 50 px; margine superiore: -50 px; larghezza: 800 px; margin-left: auto; margin-right: auto;) #rasporka (altezza: 50px;)

Bene, la vista finale di Index.html è stata mostrata appena sopra. Ecco fatto, questa serie di articoli dedicati al layout a blocchi di layout fissi e fluidi a 2 e 3 colonne del sito può considerarsi completa.

Puoi anche guardare il video "Lavorare con il tag div Html":

Buona fortuna a te! A presto sulle pagine del sito blog

puoi guardare più video andando su

Potresti essere interessato

Layout a blocchi: crea layout a due colonne, tre colonne e sito fluido
Layout DiV - Crea blocchi per un layout a due colonne in HTML, determina le loro dimensioni e imposta il loro posizionamento in CSS

Ricordo che nel momento in cui ho iniziato a passare dalle tabelle al layout per div, una delle difficoltà che ho riscontrato è stata la seguente - come spingere il piè di pagina nella parte inferiore della finestra del browser per far sembrare la pagina allungata alla sua piena altezza, indipendentemente dalla quantità di testo, e se l'altezza della pagina è maggiore dell'altezza della finestra del browser (quando appare lo scorrimento), il piè di pagina rimarrebbe al suo posto.

Se si utilizzano tabelle questa attività viene risolta solo specificando l'altezza per la tabella e/o una cella nidificata in essa, quindi quando si utilizza CSS in un layout a blocchi, viene utilizzato un approccio completamente diverso.

Nel processo di pratica, ho individuato per me stesso 5 modi per utilizzare i CSS per premere il piè di pagina nella parte inferiore della finestra del browser.

Il codice HTML di tutti i metodi presentati ha la seguente struttura (l'unica differenza è nel codice CSS):

Nel CSS sottostante sono incluse solo quelle proprietà che sono il minimo richiesto per implementare il metodo corrispondente. Per ciascuno di essi, puoi vedere un esempio dal vivo.

Il primo modo

Il piè di pagina viene schiacciato verso il basso posizionandolo in modo assoluto e tirando l'altezza dei suoi blocchi genitori (html, body e .wrapper) del 100%. In questo caso il contenuto block.content deve essere specificato con un margine inferiore uguale o maggiore dell'altezza del piè di pagina, altrimenti quest'ultimo coprirà parte del contenuto.

* (margine: 0; padding: 0;) html, body (height: 100%;) .wrapper (posizione: relativa; min-height: 100%;) .content (padding-bottom: 90px;) .footer (posizione : assoluto; sinistra: 0; fondo: 0; larghezza: 100%; altezza: 80 px;)

Secondo modo

Il piè di pagina viene premuto allungando il blocco di contenuto e i suoi "genitori" all'intera altezza della finestra del browser e sollevando il piè di pagina attraverso un margine negativo (margine in alto) per eliminare lo scorrimento verticale che appare allo stesso tempo. In questo caso, è necessario indicare l'altezza del seminterrato e deve essere uguale alla quantità di rientro.

* (margin: 0; padding: 0;) html, body, .wrapper (height: 100%;) .content (box-sizing: border-box; min-height: 100%; padding-bottom: 90px;). piè di pagina (altezza: 80 px; margine superiore: -80 px;)

Grazie alla proprietà box-sizing: border-box, impediamo al riquadro .content di superare il 100% di altezza. Cioè, in questo caso min-height: 100% + padding-bottom: 90px è uguale al 100% dell'altezza della finestra del browser.

La terza via

È un bene perché, a differenza di altri metodi (tranne il 5°), l'altezza del piè di pagina non ha importanza.

* (margine: 0; padding: 0;) html, body (height: 100%;) .wrapper (display: table; height: 100%;) .content (display: table-row; height: 100%;)

Qui emuliamo il comportamento di una tabella trasformando il blocco .wrapper in una tabella e il blocco .content in una riga di tabella (display: tabella e display: proprietà di riga di tabella rispettivamente). A causa di ciò, oltre al fatto che il blocco .content e tutti i suoi contenitori padre sono impostati al 100% di altezza, il contenuto viene allungato all'intera altezza, ma meno l'altezza del piè di pagina, che viene determinata automaticamente - l'emulazione della tabella impedisce il piè di pagina dalla scansione oltre l'altezza della finestra del browser.

Di conseguenza, il piè di pagina verrà spostato in basso.

Quarto modo

Questo metodo non è simile a nessuno dei precedenti e la sua particolarità risiede nell'uso della funzione CSS calc() e delle unità vh, supportate solo dai browser moderni. Qui è necessario conoscere l'altezza esatta del seminterrato.

* (margine: 0; padding: 0;) .content (min-height: calc (100vh - 80px);)

100vh è l'altezza della finestra del browser e 80px è l'altezza del piè di pagina. E usando la funzione calc(), sottraiamo il secondo valore dal primo, spingendo così il piè di pagina verso il basso.