Ogni progettista di layout prima o poi deve affrontare la necessità di premere il piè di pagina (piè di pagina) del sito in fondo alla pagina. Ci sono diversi modi sul web per risolvere questo problema. Ne mostrerò alcuni che utilizzo in pratica.

Il markup html più semplice:

Metodo n. 1

Il footer viene spinto verso il basso posizionandolo in modo assoluto e tirando l'altezza dei blocchi padre (html , body e wrapper) del 100%. In questo caso, il blocco di contenuto deve specificare un rientro inferiore, che sia uguale o maggiore dell'altezza del piè di pagina, altrimenti quest'ultimo chiuderà parte del contenuto.

* ( margin: 0; padding: 0; ) html, body ( height: 100%; ) .wrapper ( position: relative; min-height: 100%; ) .content ( padding-bottom: 90px; ) .footer ( posizione : assoluto; a sinistra: 0; in basso: 0; larghezza: 100%; altezza: 80px; )

Metodo n. 2

Il piè di pagina viene premuto allungando il blocco di contenuto e i suoi "genitori" per l'intera altezza della finestra del browser e sollevando il piè di pagina verso l'alto attraverso il margine negativo (margin-top) per eliminare lo scorrimento verticale che appare. In questo caso, è necessario specificare l'altezza del seminterrato e deve essere uguale al valore del rientro. Grazie alla proprietà box-sizing: border-box, non lasciamo che la casella del contenuto superi il 100% di altezza. Quindi, in questo caso, min-height: 100% + padding-bottom: 90px equivale al 100% dell'altezza della finestra del browser.

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

Metodo n. 3

Questo metodo è buono perché, a differenza degli altri metodi (tranne il 5°), l'altezza del piè di pagina non ha importanza. Qui emuliamo il comportamento di una tabella trasformando il blocco wrapper in una tabella e il blocco di contenuto in una riga di tabella (rispettivamente display: table e display: table-row properties). A causa di ciò, oltre al fatto che il blocco di contenuto e tutti i suoi contenitori principali sono impostati su un'altezza del 100%, il contenuto viene esteso all'intera altezza, ma meno l'altezza del piè di pagina, che viene determinata automaticamente - tabella l'emulazione impedisce al piè di pagina di scorrere oltre l'altezza della finestra del browser.

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

Metodo n. 4

Questo metodo è diverso da tutti i precedenti, e la sua particolarità è l'uso della funzione CSS calc() e dell'unità di misura vh, che sono supportate solo dai browser moderni. Qui è necessario conoscere l'altezza esatta del piè di pagina. 100vh è l'altezza della finestra del browser e 80px è l'altezza del piè di pagina. E con l'aiuto della funzione calc(), sottraiamo il secondo valore dal primo, premendo così il piè di pagina verso il basso.

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

Metodo #5

Forse questo Il modo migliore di tutti presentati, tuttavia, funziona solo nei browser moderni. Come nel terzo metodo, l'altezza del piè di pagina non ha importanza.

* ( margin: 0; padding: 0; ) html, body ( height: 100%; ) .wrapper ( display: flex; flex-direction: column; height: 100%; ) .content ( flex: 1 0 auto; ) .piè di pagina ( flex: 0 0 automatico; )

Metodo #6

Un'intera libreria per diverse occasioni (usando Flexbox)

Ciao, cari lettori del sito del blog. Continuiamo il tema del layout a blocchi, iniziato e continuato nei tre articoli precedenti. In linea di principio, siamo già riusciti a creare un layout del sito sia a due che a tre colonne e siamo anche riusciti a considerare le sfumature della creazione di un layout fluido.

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

Che problemi hai avuto con il layout del nostro sito?

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 (ad alta risoluzione) e durante la visualizzazione di una pagina con una piccola quantità di informazioni.

In questo caso, potrebbe risultare che il piè di pagina non verrà premuto nella parte inferiore dello schermo, ma si troverà quasi a metà altezza, che nella maggior parte dei casi sembrerà brutto e antiestetico.

Tuttavia, secondo me, è necessario premere il piè di pagina fino in fondo al layout del sito, e questo sarà particolarmente vero nel caso in cui l'altezza della pagina sia inferiore all'altezza dello schermo dell'utente. Schematicamente, questo può essere rappresentato come segue:

Quelli. il corretto comportamento del footer per il caso di una piccola quantità di informazioni sulla pagina e grande schermo l'utente sarà:

Per implementarlo, dobbiamo eseguire una serie di manipolazioni con il codice del nostro layout. Inoltre, apporteremo modifiche non solo al file di stile CSS Style.css, ma anche a Index.html, che contiene codice HTML e forma 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 sarà simile a questo:

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

Corpo, 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 sembrava qualcosa del genere:

Come puoi vedere, il footer non è premuto fino in fondo e, quindi, non soddisfa i nostri requisiti (si trova sempre sotto la colonna più bassa), quindi dovremo apportare modifiche al codice. Lo stesso può essere fatto per il layout a due colonne e anche per il layout fluido. Il metodo è universale.

Come spingere il piè di pagina in fondo al layout del sito

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

Tutto il contenuto della pagina del sito viene inserito 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; riempimento:0px; altezza: 100%; )

Sul aspetto esteriore questo non si rifletterà ancora in alcun modo, ma ora il blog principale può essere esteso a tutta l'altezza dello schermo. Quelli. era una specie di fase preparatoria.

Le principali proprietà dei CSS, se lo desideri, puoi vedere. Ora impostiamo il contenitore Div che racchiude tutto il nostro layout ad un'altezza minima del 100%:

Voglio anche evidenziarlo (div con id="maket"). Per fare ciò, imposteremo una cornice utilizzando la proprietà Border () corrispondente:

La proprietà border: solid 3px black consente di impostare un bordo solido (solido) con uno spessore di 3 pixel in nero per questo contenitore. Ciò ti consentirà di vedere chiaramente che il contenitore con il layout è allungato per l'intera altezza dello schermo, anche con una piccola quantità di informazioni sulla pagina:

Ora dovremo estrarre il footer block dal contenitore generale e posizionarlo sotto, subito dopo quello generale. Cosa darà? E il fatto che, infine, il piè di pagina del layout si degni di scendere, e non si accoccolerà, come prima, alla sua colonna più lunga. In questo caso, Index.html sarà simile a questo:

Si noti che il blocco del piè di pagina non è più all'interno di un contenitore comune (maket), e quindi la sua larghezza non è più controllata dalle proprietà CSS impostate per maket nel file Style.css. Il piè di pagina verrà allungato per tutta la larghezza dello schermo, ma si troverà comunque nella parte inferiore dello schermo, immediatamente sotto il blocco principale:

Ma ancora una volta c'è un problema, perché per vedere il footer, ora devi scorrere lo schermo nel browser (vedi la barra di scorrimento nella figura sopra).

Si scopre che ciò è dovuto al fatto che il contenitore principale (layout) occupa l'intera dimensione dello schermo in altezza (questo è determinato dall'altezza minima: proprietà 100%) e il piè di pagina si trova immediatamente dietro di esso e dovrai usarlo scorrendo per visualizzarlo, che non è molto comodo e funzionale. .

Puoi risolvere questo problema dando un riempimento negativo al contenitore del piè di pagina Div in modo che si sposti di una distanza uguale alla sua altezza. In questo caso, il contenitore del piè di pagina scorrerà sul contenitore principale e si adatterà all'altezza della schermata del browser (ovvero, non sarà necessario utilizzare lo scorrimento per visualizzarlo).

Ma per impostare un rientro negativo dall'alto, devi conoscere la stessa altezza del piè di pagina, ma non lo sappiamo ancora.

Pertanto, per prima cosa impostiamo l'altezza del contenitore contenente il footer impostando la proprietà corrispondente in Style.css:

#footer( background-color:#FFC0FF; clear: both; height: 50px; )

E quindi impostiamo un riempimento negativo dall'alto a un'altezza uguale alla sua altezza:

Ciò consentirà al piè di pagina di salire esattamente alla sua stessa altezza e quindi adattarsi alla schermata del browser (ora possiamo rimuovere il bordo: proprietà CSS nera solida 3px dalla regola maket in modo che lo spessore del bordo non impedisca l'intero layout , insieme al piè di pagina, dall'inserimento nello schermo in altezza):

Come puoi vedere, ora la barra di scorrimento non appare nel browser e l'intero layout del nostro sito basato su blocchi a tre colonne si adatta a uno schermo (in caso di una piccola quantità di informazioni sulla pagina) e ha un piè di pagina situato nella molto in basso. Che è esattamente quello che dovevamo fare.

Inseriamo il distanziatore e combattiamo con Internet Explorer

Ma c'è un problema, che apparirà solo quando ci sono maggiori informazioni sulla pagina del layout e questa situazione potrebbe rivelarsi:

Si scopre che potrebbe verificarsi una situazione in cui le informazioni in una delle colonne del layout andranno a finire nel piè di pagina, il che non sembrerà carino. Ciò è dovuto al famigerato riempimento negativo che abbiamo impostato per esso, che ha contribuito a elevare il nostro piè di pagina nel contenitore del layout principale.

Quelli. si scopre che nella parte inferiore dello schermo ci sono due blocchi sovrapposti nell'area del seminterrato.

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

Impostando l'altezza di questo nuovo contenitore all'altezza del piè di pagina, possiamo evitare che le informazioni del contenitore principale entrino in collisione con il blocco del 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 scriviamo per questo ( , che imposta l'altezza di questo contenitore distanziatore uguale all'altezza del seminterrato:

#rasporka ( altezza: 50px; )

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

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

Come accennato in precedenza, la larghezza del piè di pagina dovrebbe ora essere impostata separatamente, perché. questo contenitore non fa più parte di quello principale. Per fare ciò, aggiungi al file CSS proprietà aggiuntive per il piè di pagina, che consente di impostarne la larghezza e di 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 come abbiamo fatto per l'intero layout sul layout del blocco.

Pertanto, dovremo aggiungere ulteriori proprietà per l'ID del piè di pagina:

#footer( background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; )

Usando la proprietà width:800px, la larghezza è impostata su 800px, e usando le due proprietà margin-left: auto e margin-right: auto, i margini margin-left e right del footer vengono impostati automaticamente, per cui questi margini saranno uguali e il nostro eroe si allineerà al centro:

Bene, sembra che non ci sia più niente da migliorare, ma era così. Come sempre il nostro browser preferito Internet Explorer 6 non capisce qualcosa dalle proprietà CSS che utilizziamo. In questo browser (e probabilmente anche in altri vecchi), nonostante tutti i nostri sforzi, il footer non verrà premuto fino in fondo, ma si attaccherà comunque alla colonna più alta del layout del sito.

Questo è tutto perché ( non comprende la proprietà min-height: 100% che abbiamo usato per impostare l'altezza minima del box principale in modo che sia uguale all'altezza dello schermo.

Pertanto, per risolvere questo problema, dovremo applicare il cosiddetto hack, che ci permette di spiegare (con le dita) ai vecchi browser cosa fare. Prima dell'elenco delle proprietà CSS per maket, dovrai inserire la seguente combinazione:

* html #make ( altezza: 100%; )

Questa regola si applicherà solo a browser Internet Explorer 6, il resto non ne terrà conto e lo eseguirà.

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

Corpo, html ( margin:0px; padding:0px; height: 100%; ) * html #maket ( height: 100%; ) #maket ( width:800px; margin:0 auto; min-height: 100%; ) # 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( background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margine-sinistra: auto; margine-destra: auto; ) #rasporka ( altezza: 50px; )

Bene, la forma finale di Index.html è stata data un po' più in alto. Ecco fatto, questa serie di articoli dedicati al layout a blocchi di layout fissi e in gomma a 2 e 3 colonne si può considerare conclusa.

Puoi anche guardare il video "Lavorare con Tag HTML div":

Buona fortuna a te! A presto sul sito delle pagine del blog

Potresti essere interessato

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

Oggi troveremo la soluzione definitiva e affidabile alla domanda su come premere il piè di pagina in fondo alla pagina usando css e html usando css. Trascina il piè di pagina in fondo alla pagina. Anche in questo modo puoi centrare il contenuto del contenuto al centro della pagina.

Per premere il piè di pagina in fondo alla pagina, è necessario crearne uno specifico struttura html:

Dopo che la struttura della pagina è pronta, iniziamo a configurare il CSS.

Dobbiamo assicurarci che l'html e il corpo occupino l'intera altezza della pagina (altezza dello schermo intero). E il blocco wrapper aveva un'altezza minima dello schermo e il suo contenuto si sarebbe allungato secondo necessità. Successivamente, dobbiamo spingere il piè di pagina nella parte inferiore della pagina o nella parte inferiore dello schermo in modo che rimanga sempre al di sotto del contenuto e, se il contenuto è ridotto, il piè di pagina viene premuto nella parte inferiore dello schermo. Inoltre, il contenuto deve essere rientrato nella parte inferiore per il piè di pagina.

Premi il piè di pagina nella parte inferiore dello schermo codice css:

Questo metodo funziona solo nel caso di un piè di pagina fisso. Ciò significa che sarà più difficile spingere il piè di pagina in fondo alla pagina se la sua altezza è dinamica, poiché sarà necessario fornire il corretto riempimento inferiore per il div con la classe principale. Qui, javascript sarà già necessario e saranno necessarie informazioni.

Nella maggior parte dei casi, il piè di pagina in fondo alla pagina ha un'altezza fissa, quindi questo metodo funziona senza problemi.

Se conosci un modo più semplice o trovi errori in questo metodo, registrati e scrivi commenti. Insieme cercheremo il modo di lavorare perfetto per collegare il piè di pagina alla parte inferiore della pagina.

Non molto tempo fa mi è stato chiesto di esibirmi come premere il piè di pagina fino in fondo. Questo problema si verifica solo in disposizione dei blocchi. E purtroppo L'opzione migliore no, ma in questo articolo ti mostrerò come faccio a premere il piè di pagina verso il basso Sono al layout dei siti.

Diciamo che c'è codice HTML:

Per premere il piè di pagina fino in fondo, deve essere applicato al dato codice HTML prossimo codice CSS:

html(
altezza: 100%;
}
corpo (
altezza: auto !importante; // Obbligatorio se ci sono molti contenuti in main
altezza: 100%;
altezza minima: 100%
}
#principale (
imbottitura-fondo: 50px
}
#piè di pagina (
in basso: 0;
altezza: 50px;
posizione: assoluta;
}

Qui è tutto trasparente, ma dirò solo che la linea " altezza: auto !importante;" ti permette di tenere conto del fatto che se il contenuto in principale sarà maggiore dell'altezza della pagina, quindi l'altezza sarà maggiore di 100% . Senza di esso, il piè di pagina si adatterà semplicemente al contenuto e sarà sempre nello stesso posto.

Purtroppo la soluzione non brilla di bellezza, ma altre, secondo me, sono anche peggio. In generale, quando non ci sono abbastanza contenuti, lascio semplicemente il colore di sfondo del sito in basso. Ma il cliente a volte chiede lo stesso abbassare il seminterrato, quindi utilizzo il metodo descritto in questo articolo.

Molto spesso è necessario spingere il piè di pagina in fondo alla pagina, anche se l'altezza del contenuto del sito è inferiore all'altezza dello schermo. Belle proprietà come posizione e fondo ci aiuteranno in questo.

A prima vista, il compito è molto semplice: basta inserire un div in fondo alla pagina. Tuttavia, vale la pena considerare che il riempimento dei contenuti potrebbe essere inferiore a una pagina.

Cominciamo con il più semplice, diciamo che abbiamo