Come ottenere una pagina Web per aderenti al fondo

September 26

Come ottenere una pagina Web per aderenti al fondo


Quando si crea un piè di pagina per il tuo sito, spesso, è difficile ottenere questo elemento ad attaccarsi al fondo della pagina. Il problema si verifica quando non si dispone di contenuti sufficienti a riempire la pagina, il che rende il contenuto piè di pagina appaiono più in alto. Fortunatamente, è possibile scrivere una serie di Cascading Style Sheets (CSS) regole per risolvere questo problema. Usa il tuo programma di editor di testo per creare il CSS che assicura che i bastoni di pagina Web a fondo in tutti i principali browser.

istruzione

1 Portate il vostro programma di editor di testo e lanciare il documento pagina Web che si desidera modificare. Posizionare il cursore prima del tag di chiusura </ head> e immettere il seguente codice CSS:
<Style type = "text / css">
html, body {}
.footer, .Portare {}
.contenuto{ }
</ Style>

Gli elementi elencati tra i tag stile creare segnaposti per le regole che ottenere la vostra footer della pagina Web ad attaccarsi al fondo.

2 Posizionare il cursore tra le parentesi graffe del "html, body" regola e digitare "height: 100%;" all'interno delle parentesi. Questo attributo consente al visitatore di minimizzare o massimizzare la pagina Web all'interno di una finestra del browser.

3 Tipo "Altezza:;" nel .footer, stile .move e immettere un valore numerico per specificare quanto in alto si desidera visualizzare il contenuto piè di pagina. Per esempio:
.footer, .Portare {height: 175px; }

4 Inserire "min-height: 100%;" e "height: 100%;" e "height: auto importante;!" all'interno della regola ".content" che formatta l'area in cui si immettono le informazioni della pagina Web. Inoltre, digitare "margin: 0 auto;" e inserire il margine negativo di altezza del piè di pagina. Il tuo codice CSS completo ora è simile al seguente:
<Style type = "text / css">
html, body {height: 100%; }
.footer, .Portare {height: 175px; }
.content {min-height: 100%; height: 100%; ! Height: auto importante; margin: 0 auto -175px; }
</ Style>

5 Posizionare il cursore sotto il tag inizio <body> e inserire il codice HTML che si applica il CSS alla pagina Web:
<Div class = "content">
<P> Digitare le informazioni della pagina Web qui. </ P>
<Div class = "mossa"> </ div>
</ Div>
<Div class = "footer">
<P> Inserisci il tuo contenuti piè di pagina qui. </ P>
</ Div>

6 Salvare il file e visualizzare l'anteprima in un browser per vedere il vostro nuovo sito web piè di pagina.

Consigli e avvertenze

  • La parte ".move" della regola di stile aiuta la pagina Web aderenti al fondo.
  • L ' "importante" dichiarazione dopo un attributo assicura l'attributo è sempre obbedito, anche se qualcosa contraddice in seguito esso.
  • Se si aggiunge imbottitura o attributi di confine alla tua .footer, regola .move, essere sicuri di tenere conto di questo valore quando si crea un margine negativo in stile .content.

Articoli Correlati