Hvordan lage en Div klistret til bunnen av en forelder Div

Hvordan lage en Div klistret til bunnen av en forelder Div


Div koder organisere innhold på en webside og dele HTML-siden inn i seksjoner, vanligvis for å forenkle formatering. Hver Div på siden passer sammen for å danne en komplett webside. Brukere kan ha en div hver for overskriften, sidebar, innhold og bunntekst. Det er ingen begrensning på antall seksjoner tillatt på et nettsted. Hvis du trenger en div å "stikke" til bunnen av en annen div, utnytte både absolutt og relativ posisjonering i koding.

Bruksanvisning

1 Åpne et tomt notepad fil for HTML-siden.

2 Lag to div klasser i HTML-dokumentet. Den første, den overordnede div, vil være "omslag" for eksempel, og en på den nederste for eksempel kalles "bunnen". Så langt er koden som følger:

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

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

3 Plasser innhold etter at klassen koden, men før den avsluttende </ div> tag.

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

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

4 Legg posisjonering attributtene til dokumentet ditt i spissen. Den "." indikerer at du er styling en klasse og "stillingen" angir hvor du vil plassere den delen. "0" i ".bottom" indikerer ingen margin på hver side av div.

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

</ Head>
<Div class = "wrapper">
Parent sideinnhold
</ Div>

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

Hint

  • Div posisjoneringen kan være enten de er faste, noe som posisjonerer seg i forhold til den første div som er ikke-statisk posisjonert, eller relativ, som plasserer den i forhold til sin normale stilling.
  • Lukk alltid alle tagger på siden for å hindre uventede feil.