Problemer med height 100%

100% er netop 100% af skærmen. Dvs. det er to forskellige værdier ved to forskellige opløsninger. Nu ved jeg ikke hvordan dit billede ser ud, men måske det kan løses ved at indsætte en background-repeat:repeat-y; ?

Hmmmm, selv om jeg sætter background-repeat til, så vil selve div'en jo stadig kun være skærmens højde - så det hjælper ikke rigtigt noget.

Har du brug for højde på div´en? Nu kender jeg selvfølgelig ikke dit design, men var det ikke mere hensigstmæssigt at den bare udvidede sig alt efter indholdet?

Meningen er at den skal fylde hele skærmens højde - også selv om indholdet ikke fylder hele siden ud.

Så skal du måske bare køre med dit billede i toppen og når du så løber "tør" for billede (det vil sige, kommer ud over de 100%), gå over til at køre med background-color på selve din body.

Det vil gøre at background-color ikke skinner igennem i toppen (så længe billedet fylder det hele), mens at så snart du kommer ud over de 100%, vil farven tage over. Den skal så matche billedet nogenlunde.

Det går vist ikke i det her tilfælde - prøv at se her:
http://www.icube.dk/test/smh/test.htm

Som du kan se, så vil jeg gerne have "papiret" til t fylde hele skærmens højde.

Hvis du så ctrl + indtil teksten bliver så stor at den går nedenud af billedet, så kan du se problemet.

Øh... kan ikke rigtig se problemet :) Men sidder også kun med IE7 og FF lige nu... og der ser det da meget fornuftigt ud.

Ja, men ikke hvis skærmopløsningen er lav - eller der kommer meget indhold på siden - hvis du f.eks. forstørrer teksten med ctrl + så den går ud over sidehøjden, så fremkommer problemet.

Har lige lagt lidt mere tekst ind - prøv at se igen.

Tror det bliver meget svært... jeg ved ihvertfald ikke hvordan :) Problemet er jo at 100% er det hele, men kun af det du kan se... dvs. alt under scrollbaren ikke tæller med.

Ved ikke lige hvordan det skal løses, hvis det er påkrævet at hele siden altid er fyldt ud, lige meget hvor meget indhold der er.

Okay - tak for forsøget anyway.  :-)

Btw - opdagede lige at www.krak.dk har den funktion jeg leder efter - der udvider den sig når indholdet bliver større end skærmens højde - kan desværre ikke lige lure i deres kode hvordan det er gjort.

Det du vil have er at en omkrandsende <div> skal udvide sig i forhold til indholdet, men når du placerer alt indholdet med position: absolute, fjerner du netop afhængigheden mellem de forskellige elementer.

<div style="border: 1px solid red;">
<div style="position: absolute; height: 100px; width: 100px; border: 1px solid blue;"></div>
</div>

Du vil (forhåbentlig) :) se ud fra denne kode stump at den omkrandsende <div> ikke udvider sig i forhold til indholdet.

Så du skal have bragt afhængigheden tilbage i dit design. Prøv at lave følgende ændringer og se så om ikke det kan hjælpe dig på vej :)

I test.htm skal indholdet se således ud (brudstykker)....

...
<div id="center">
<div id="menuCon" style="height: 190px;">
<div id="top"></div>
...

...
<div id="headerbox">
<span class="H1">SPECIALISTER I MERCEDES!</span></div>
</div>
<div id="textbox" style="left:60px">
At købe en Mercedes er ikke bare at købe en bil - det er at købe en oplevelse!
...

I stylesheet.css skal følgende ændres...

...
#center {
padding:0px;           
width:870px;
/* height:100%; */
margin-left:-435px;
position:absolute;
left:50%;
top: 0px; /*50%;*/
background-image:url(images/background.jpg);
}
...

...
#textbox {
position: relative; /* absolute; */
top: 0px;
width: 350px;
height: 100%; /* ændret fra 450px; */
z-index:5;
}
...

Lad høre om det hjælper noget :)

Men som sagt er udbredt brug af position: absolute; 'uheldig' :)

Mvh. Johan

Hmmm yes - I see your point, men det giver mig så nogle andre problemer med positioneringen af mine elementer + det vil ikke fylde siden helt ud, hvis indholdet er mindre end skærmens height.

Tror det ender med en helt anden løsning, med en afsluttet bottom.

Men tak for forsøgene anyway.

Hvis der er nogen der vil have point, så smid et svar.