Layout med 3 "rader" som fyller vinduet

abcd423417984 · 6. juni 2007

Hei

Jeg ønsker en layout hvor nettsiden min i hovedsak består av 3 rader (top, main, bottom). Hver av disse delene av nettsiden er laget ved hjelp av div's.

Så kommer utfordringen. Hvordan kan jeg få denne siden til å i utgangspunktet dekke hele høyden på nettleseren slik at main fyller all plass som blir "til overs" ?

top og bottom skal altså kun ta den størrelsen den trenger, mens main skal fylle siden. Det er også viktig at main _kan_ utvides i høyden hvis innholdet trenger mer plass enn det vinduet kan gi.

Noen forslag?

Jakob K · 6. juni 2007

Skal du fylle skjermen er det jo bare å renge ut det. Hvis topp og bunn fyller 10% hver og innholdet 80% har du fylt høyden.

Hvis to av DIV-elementene har prosentvis høyde, og content-DIV-en har minimumshøyde (min-height: 80%; f.eks) bør det jo fungere. Da vil skjermen alltid være fyllt, også vil content utvide seg ettersom den får mer innhold.

Tenkte du forresten at bunn og topp skal holde seg på samme sted på skjermen når det kommer mer innhold, eller alltid være øverst og nederst i forhold til innholdet?

Emancipate · 6. juni 2007

Gjør nesten susen:

<html>
<head>

<style>

html, body {
   height: 100%;
   margin: 0px;
   padding: 0px;
}

.container {
   min-height: 100%;
   background: #CC99FF;
}

#top {
   background: #99BBFF;
}

#bottom {
   background: BBCCee;
   position: absolute;
   bottom: 0;
   width: 100%;
}

</style>

<!--[if lte IE 6]>
<style type="text/css">
.container {
height: 100%;
}
</style>
<![endif]-->

</head>
<body>


<div class=container>
   <div id=top>
       Top
   </div>
   <div>
       Main
   </div>
   <div id=bottom>
       Bottom
   </div>
</div>

</body>
</html>

abcd423417984 · 6. juni 2007

Hvis to av DIV-elementene har prosentvis høyde, og content-DIV-en har minimumshøyde (min-height: 80%; f.eks) bør det jo fungere. Da vil skjermen alltid være fyllt, også vil content utvide seg ettersom den får mer innhold.

problemet er at jeg (pga bilder) ikke har prosentvis høyde :/

Tenkte du forresten at bunn og topp skal holde seg på samme sted på skjermen når det kommer mer innhold, eller alltid være øverst og nederst i forhold til innholdet?

8797580[/snapback]

I forhold til innholdet.

abcd423417984 · 6. juni 2007

Gjør nesten susen:


<!--[if lte IE 6]>
<style type="text/css">
.container {
height: 100%;
}
</style>
<![endif]-->

8797890[/snapback]

Jøss...den saken der har jeg aldri sett før.

Ved å endre 6 til 7 funka den koden ihvertfall i opera9, firefox2 og IE7. Har ikke testa IE6 dog...

EDIT: Funker ikke hvis man må scrolle jo...da følger ikke bottom-feltet etter...

Endret 6. juni 2007 av invictus

Emancipate · 6. juni 2007

EDIT: Funker ikke hvis man må scrolle jo...da følger ikke bottom-feltet etter...

Fillern det var ikke meninga.

Logg inn

Layout med 3 "rader" som fyller vinduet

Anbefalte innlegg

abcd423417984

Videoannonse

Jakob K

Emancipate

abcd423417984

abcd423417984

Emancipate

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer