Come far aderire la parte inferiore della pagina ("piè di pagina") al bordo inferiore della finestra: questo è probabilmente il problema più comune nel layout delle pagine del sito. Ci sono, ovviamente, soluzioni, e ce ne sono diverse. Di seguito è riportato un modo per assicurarsi che il piè di pagina sia sempre premuto in fondo alla pagina, indipendentemente dalla quantità di contenuto e dal tipo di browser.
È necessario
Conoscenza base di CSS e HTML
Istruzioni
Passo 1
Prendiamo come esempio uno degli schemi di impaginazione più tipici: avrà un attico (intestazione), un blocco principale e un piè di pagina. Naturalmente, se necessario, puoi inserire più colonne nel blocco principale, ma qui non lo faremo, ci concentreremo solo sul non posizionare il piè di pagina. Il codice HTML della pagina inizierà con la dichiarazione della specifica:
Tra i tag e, oltre al titolo della pagina, inseriremo un'indicazione della codifica: Oltre a un collegamento a un file CSS esterno contenente una descrizione degli stili: @import "styles.css"; Non posizioneremo il descrizione degli stili direttamente nel codice html della pagina per evitare complicazioni con il browser Opera della nona versione. Tra i tag e posizionare la struttura a blocchi della pagina. Il primo, ovviamente, è il cartiglio. Gli daremo l'identificatore dell'intestazione per poter impostare gli stili per questo particolare blocco:
Questa intestazione è sempre nella parte superiore della finestra.
Quindi - il blocco principale della pagina. Consisterà di due nidificati: esterno (identificatore - esterno) e interno (identificatore - involucro esterno):
Questa è la parte principale.
E infine, il piè di pagina:
È piè di pagina - sempre nella parte inferiore della finestra!
La pagina completa sarà simile a questa:
Come premere il piè di pagina?
@import "styles.css";
Questa intestazione è sempre nella parte superiore della finestra.
Questa è la parte principale.
È piè di pagina - sempre nella parte inferiore della finestra!
Passo 2
Passiamo ora al contenuto del foglio di stile. Implementa il seguente schema: il blocco della pagina principale sarà impostato al 100% di altezza, il titolo sarà posizionato in modo assoluto e il piè di pagina sarà relativo. Per evitare che l'intestazione si sovrapponga al contenuto principale della pagina, questo contenuto principale viene inserito in una casella aggiuntiva all'interno della casella principale e questa casella aggiuntiva è impostata su un margine superiore uguale all'altezza della casella dell'intestazione. E al piè di pagina viene assegnato un margine superiore negativo uguale alla sua altezza: in questo modo verrà sollevato al di sopra del bordo inferiore della finestra alla sua massima altezza. Contenuto completo del file css: * {margin: 0; imbottitura: 0}
html, corpo {altezza: 100%;} corpo {
colore nero;
posizione: relativa;
}
#esterno {
altezza minima: 100%;
margine: 0;
fondo: bianco;
colore nero;
} * html #esterno {altezza: 100%;}
#intestazione {
posizione: assoluta;
in alto: 0;
sinistra: 0;
larghezza: 100%;
altezza: 70px;
sfondo: # 304a00;
trabocco: nascosto;
colore bianco;
allineamento del testo: centro;
} #piè di pagina {
posizione: relativa;
margine superiore: -50 px;
chiaro: entrambi;
larghezza: 100%;
altezza: 50px;
colore di sfondo: # 304a00;
colore bianco;
allineamento del testo: centro;
}
.involucro esterno {
galleggiante: sinistro;
larghezza: 100%;
imbottitura: 71px;
} Questo file dovrebbe essere salvato con il nome che abbiamo specificato nel codice html della pagina - styles.css.
