Gå til innhold

Å få main "<div>"'en til å fylle ut hele siden ned


Anbefalte innlegg

Hei.

 

Jeg prøver meg på tableless layout med CSS og xhtml, og jeg har et lite problem.

Jeg prøver å få til et layout som er noe lignende dette:

1.jpg

 

Det går for det meste greit, men problemet er at jeg ikke får delen "hovedsida" (eller selve innholdet) ligger på til å fylle vinduet helt ned.

Så layoutet blir seende sånn ut:

2.jpg

 

Er det mulig å fikse dette med CSS?

Isåfall, hvordan?

 

Her er stylen til hovedsida:

#main
{
background-color: #ffffff;
border: 1px #000000 solid;
margin-left: 175px;
margin-top: 86px;
padding: 5px;
}

 

På forhånd takk :)

 

EDIT: Jeg har prøvd å sette "padding-bottom: 100%". Hoveddelen av siden fylte vinduet helt ned, greit nok, + enda litt lenger ned :p

Å sette "height: 100%" ga ingen effekt i det hele tatt.

Endret av ZiggWarth
Lenke til kommentar
Videoannonse
Annonse

Hm..

Det første du foreslo fungerte dårlig (pga. at html, body { height: 100%; } bare forteller siden at den skal bruke all tilgjengelig plass vertikalt til <body> og <html> tagen (eller tar jeg feil nå?)). Problemet er at den <div> taggen som inneholder hoveddelen av siden (<div id="main">) kun bruker så mye plass den faktisk trenger for å vise innholdet, mens det jeg vil er å strekke den helt ned til bunnen av siden.

 

Ang. den linken du gav meg: Jeg har egentlig veldig lite lyst til å bare fylle på med bilder for å lage en illusjon av at <div>'en strekker seg helt ned, som den siden foreslo så vidt jeg kunne skjønne.

 

Men takk for svar uansett :)

Hvis du/noen andre har noen fler forslag, er jeg meget interessert i å høre dem :)

Lenke til kommentar

En liten oppdatering:

Jeg prøvde som Mr. Berg sa, la inn html, body { height: 100%; } i .css'en, og prøvde med "height: 100%" samtidig, og da skjedde det samme som når jeg prøvde padding-bottom:100%, dvs at hoveddelen ble for stor (Måtte scrolle nedover for å se resten av hovedsida, selv om det ikke var noe innhold på den).

Lenke til kommentar
En liten oppdatering:

Jeg prøvde som Mr. Berg sa, la inn html, body { height: 100%; } i .css'en, og prøvde med "height: 100%" samtidig, og da skjedde det samme som når jeg prøvde padding-bottom:100%, dvs at hoveddelen ble for stor (Måtte scrolle nedover for å se resten av hovedsida, selv om det ikke var noe innhold på den).

Det er fordi at når du setter 100% som høyde på #main så tar denne å

henter denne høyden fra html,body: 100%.. altså blir #main like stor som

100% i html, body... Om du ser på siden vil det du må scrolle tilsvare

størrelsen på headingen.

 

Da kan heller lage en footer som ligger i bunn: "bottom: 0"

samt lage en container rundt hele siden som er 100%, da får du dekket

hele vinduet i høyden uten scroll. Da kan du også la #main være med

auto på høyden...

 

Håpe du fatta noe, litt tregt forklart

Lenke til kommentar

Jeg ville vært litt forsiktig med å bruke MrBergs kodeforslag, da innholdetsfeltet ofte overskrider 100% av brukerens skjermhøyde.

Hvis man da har et bakgrunnsbilde på body, vil dette ikke vise lenger nedover.

Jeg ville heller satse på metoden på ALA, som MrBerg linket til i sitt innlegg.

Lenke til kommentar

Hm.. nå har jeg prøvd omtrent alt som er blitt foreslått her, og jeg kan ikke akkurat si jeg har kommet så veldig mye videre.

Jeg tror jeg muligens går for løsningen jeg har nå, dvs at hoveddelen bruker akkurat så mye plass den faktisk trenger.

 

Men for all del, hvis noen har flere forslag, eller tips, så er jeg mer enn interessert, ettersom jeg HELST vil få til det jeg først prøvde på (at hoveddelen fyller hele siden nedover) :)

 

Tusen takk for alle svar :)

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...