Come fare un Div aderenti al fondo di un genitore Div

April 30

Come fare un Div aderenti al fondo di un genitore Div


tag div organizzano i contenuti in una pagina Web e dividono la pagina HTML in sezioni, in genere per semplificare la formattazione. Ogni Div sulla pagina adatta insieme per formare una pagina Web completa. Gli utenti possono avere un div ciascuno per l'intestazione, sidebar, contenuti e piè di pagina. Non vi è alcun limite al numero di sezioni consentite su un sito. Se avete bisogno di uno div a "bastone" al fondo di un altro div, utilizzare il posizionamento sia assoluta e relativa nel vostro codice.

istruzione

1 Aprire un file blocco note in bianco per la vostra pagina HTML.

2 Creare due classi div nel documento HTML. Il primo, il div genitore, sarà "involucro" per l'esempio e quello a quella inferiore per l'esempio è chiamato "bottom". Finora, il codice è il seguente:

<Div class = "wrapper">
</ Div>

<Div class = "bottom">
</ Div>

3 Posizionare il contenuto dopo il tag di classe, ma prima della chiusura </ div> tag.

<Div class = "wrapper">
contenuto della pagina Parent
</ Div>

<Div class = "bottom">
contenuto della pagina Footer
</ Div>

4 Aggiungere gli attributi di posizionamento al documento nell'intestazione. Il "." indica che si sta styling una classe e "Posizione:" specifica come si desidera posizionare la sezione. La "0" nel ".bottom" indica alcun margine su ciascun lato del div.

<Head>
<Style type = "text / css">
.wrapper {position: relative;}
.bottom {position: absolute; in basso: 0;}
</ Style>

</ Head>
<Div class = "wrapper">
contenuto della pagina Parent
</ Div>

<Div class = "bottom">
contenuto della pagina Footer
</ Div>

Consigli e avvertenze

  • posizionamento Div può essere assoluto, che si posiziona rispetto al primo div che è non-statico posizionato, o relativa, che lo pone rispetto alla sua posizione normale.
  • Chiudere sempre tutti i tag nella tua pagina per evitare errori imprevisti.