Gå til innhold

Layout med 3 "rader" som fyller vinduet

abcd423417984

Anbefalte innlegg

abcd423417984

abcd423417984

Skrevet
Skrevet

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?

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Jakob K

Jakob K

Skrevet
Skrevet

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?

Lenke til kommentar
Emancipate

Emancipate

Skrevet
Skrevet

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>

Lenke til kommentar
abcd423417984

abcd423417984

Skrevet
  • Forfatter
Skrevet
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.

Lenke til kommentar
abcd423417984

abcd423417984

Skrevet
  • Forfatter
Skrevet (endret)
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 av invictus
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å
Gå til emneliste
×
×
  • Opprett ny...