CSS div height:100% utenfor viewport

[Gilbert]

#leftcontainer{

position:absolute;

top:125px;

left:3px;

background:#fff;

width:136px;

height:100%;

}

 

#centercontainer{

position:absolute;

top:125px;

left:136px;

background:#fff;

width:502px;

height:100%;

}

 

Slik ser en bit av css-scriptet ut. Jeg er en nybegynner i css, dette er den første siden jeg forsøker å bygge opp utelukkende med divs. Har kun tilgang til MIE her, så vet ikke om det problemet jeg har støtt på er unikt for MIE eller ikke. I hvertfall er faktum at height:100% har ingen innvirkning.

 

<div id="leftcontainer"></div>

<div id="centercontainer"></div>

 

Omtrent slik ser scriptet ut, og med forskjellig innhold er det kjekt å forvise seg om at begge div'er kommer helt ned.

 

 

Edit: Innlegg nr 860

Endret 11. oktober 2004 av fjartan

[PoleCat]

Er ikke helt sikker på hvordan dette fungerer når du bruker absolutt-posisjonering (må du bruke det?), men iallefall;

 

body, html {
 height: 100%;
}

Endret 11. oktober 2004 av PoleCat

[Haraldson]

Har du lest denne artikkelen som tar for seg problemer og måter å (nesten) løse det på?

 

Om pointet bare er at kolonnene skal bli like lange: http://alistapart.com/articles/fauxcolumns/

Endret 11. oktober 2004 av Mr.Berg

[PoleCat]

Husk også at du kan simulere 100% høyde med Faux Columns (f.eks bakgrunnbilde direkte på body).

 

EDIT: Berg, nå vet du hva som kommer!

Endret 11. oktober 2004 av PoleCat

[Gilbert]

Blir så rørt når dere er så flinke til å hjelpe

 

...og så blir jeg så trist når jeg innser at jeg ikke kan bidra med mye hjelp til dere... men trenger dere en venn så er jeg her! For det er jeg god på

Endret 11. oktober 2004 av fjartan

[Gilbert]

Oj, litt "in the mood" i dag. Sorry den.

 

At Mr.Berg og PoleCat krangler om hvem som skal svare er jo rørende for enhver...

 

Mr.Berg: Den første artikkelen var flott - den andre var et forslag på en løsning jeg ikke synes var optimal. Riktignok fungerer det ikke ennå, men da må der være noe annet i scriptet som ikke er ordentlig. Takk

[Haraldson]

At Mr.Berg og PoleCat krangler om hvem som skal svare er jo rørende for enhver...

Hmm... At PC dilter etter, mener du?

 

Mr.Berg: (...) den andre var et forslag på en løsning jeg ikke synes var optimal.

Hvorfor er ikke den optimal? «Alle» bruker den.

[PoleCat]

Dersom du hiver opp et bilde på hvordan du ønsker at det skal være, er det veldig mye lettere å gi deg en løsning. Dette kan variere litt etter hvordan det hele skal se ut.

[Gilbert]

Det er kanskje å ta litt hardt i å si at den ikke er optimal - men jeg har lyst til å få til en annen metode først. Siden må skrives litt om hvis jeg skal bruke et bakgrunnsbilde, *lang forklaring*, så har lyst til å prøve noe annet.

 

Please note that the solution presented on this page is only meant to give an element the same height as the viewport. You cannot port this height: 100% code to other situations.

 

For instance, if you want to make an element as high as the entire page (whatever this height may be) you're out of luck.

 

Tror kanskje siden er bygget opp feil, men sånn blir det kanskje ofte med det første css-scriptet?

 

Alt jeg vil ha er en div som starter et gitt antall pixler fra toppen, og går ned så lenge det er webside.

 

edit: [sitat]/

arg lenge leve norsk i Norge

Endret 11. oktober 2004 av fjartan

[PoleCat]

For å få den til å starte et par piksler fra toppen, tror jeg du bør sette denne verdien som top-padding på body.

 

Dersom den også skal kunne være mer enn 100%, bruker en min-height:

 

* {
 margin: 0;
 padding: 0;
}

body {
 padding: 3px 0 0 0;
}

body, html {
 height: 100%;
}

div#fjartan {
 min-height: 100%;
 height: auto !important;
 height: 100%;
}

 

IE støtter ikke min-height, derfor de andre verdiene på #fjartan.

Endret 11. oktober 2004 av PoleCat

[Gilbert]

Den skal starte 125 piksler fra toppen, pga. header. Har lagt ved et bilde i innlegget ovenfor som viser hva jeg ønsker å bli kvitt

 

Slik er den nå:

html,body{ 
height:100%
}

#centercontainer {
top:125px;
min-height: 100%;
height: auto !important;
height: 100%;
}

Og det ser ikke anderledes ut desverre...

Endret 11. oktober 2004 av fjartan

[PoleCat]

Prøvde å sette i sammen et lite eksempel med Faux Columns.

 

Er jeg på rett vei, eller er det meningen at de tre kolonnene skal gå HELT til bunnen?

 

Link.

[Lars :)]

Prøvde å sette i sammen et lite eksempel med Faux Columns.

 

Er jeg på rett vei, eller er det meningen at de tre kolonnene skal gå HELT til bunnen?

 

Link.

Hvordan skal man gjøre det hvis man har footer og?

 

På forhånd takk

Endret 11. oktober 2004 av Lars Anders

[Gilbert]

Har tro på at det skulle fungere. Gi meg en sjanse i morgen, så skal jeg se om jeg får det til :-)

[PoleCat]

Prøvde å sette i sammen et lite eksempel med Faux Columns.

 

Er jeg på rett vei, eller er det meningen at de tre kolonnene skal gå HELT til bunnen?

 

Link.

Hvordan skal man gjøre det hvis man har footer og?

 

På forhånd takk

Slik som jeg har gjort det, eller når den går helt til bunnen?

 

Om den skal gå helt til bunn, og footer skal ligge HELT i bunn, kjenner jeg ikke til annet enn bruk av prosentverdier.

[Lars :)]

*klipp*

Hvordan gjør man dette med prosentverdier, eller hvordan gjør du det?

Endret 12. oktober 2004 av Lars Anders

[PoleCat]

*klipp*

Hvordan gjør man dette med prosentverdier, eller hvordan gjør du det?

#en {
min-height: 97%;
height: auto !important;
height: 97%;
}

#to {
min-height: 3%;
height: auto !important;
height: 3%;
}

 

<div id="en"></div>
<div id="to"></div>

 

Noe sånt.

[joffar]

Mulig du kan finne noe nyttig her..

 

Fant en link som muligens kan hjelpe deg...

 

http://www.pmob.co.uk/temp/2col_right.htm

 

http://www.pmob.co.uk/temp/2col_left.htm

 

Tråden den kommer fra

http://forum.programmer.no/index.php?showt...90623&st=20&hl=