Nuovi tag. Come spingere correttamente il footer mobile in fondo alla pagina Inserire un distanziatore e combattere Internet Explorer

Questa è una specie di incubo! Perché il piè di pagina del tuo sito viene visualizzato di nuovo e cambia il design? È davvero impossibile premere correttamente il piè di pagina in fondo alla pagina con qualcosa? Almeno contenuto o mattoni! Il mattone nel monitor non si arrampica?

Vedo, quindi siediti e non fare nulla finché non leggi il nostro articolo fino alla fine.

Creare il footer giusto per il tuo sito web

Molti proprietari di siti incontrano questo problema quando il piè di pagina della pagina viene visualizzato "in alto". E poi non è chiaro cosa fare. Molto spesso, i progetti di siti Web realizzati in fretta, da soli ( cerchio "mani pazze") o webmaster principianti.

Allo stesso tempo, all'inizio della vita del sito, non succede nulla di terrificante. E un tale idillio continua finché il contenuto preme “con il proprio peso” sul seminterrato, impedendole di sollevarsi. Ma vale la pena posizionare meno materiale sulla pagina e il piè di pagina "calmo" di recente si alza immediatamente, conferendo all'intero design del sito un aspetto inappropriato.

Per eliminare questo "difetto" del template inventato, non è necessario spendere soldi per i servizi di un webmaster. Molto spesso, il piè di pagina del sito può essere posizionato tu stesso. Consideriamo tutte le possibili opzioni per eliminare un tale problema:

Primo modo

Il primo modo per "ancorare" il footer "in fondo" alla pagina è basato sui CSS. Iniziamo con il codice di esempio, quindi diamo un'occhiata più da vicino alla sua implementazione:

html ( height: 100%; ) header, nav, section, article, aside, footer ( display: block; ) body ( height: 100%; ) #wrapper ( width: 1000px; margin: 0 auto; min-height: 100 %; height: auto !important; height: 100%; ) #header ( height: 150px; background-color: rgb(0,255,255); ) #content ( padding: 100px; height:400px; background-color: rgb(51,255,102) ; ) #footer (larghezza: 1000px; margine: -100px auto 0; altezza: 100px; posizione: relativa; colore di sfondo: rgb(51,51,204); )

Per attaccare un piè di pagina in fondo al tag della pagina