Hej,

Jag försöker skapa en ganska simpel layout. Det är helt enkelt 3 rader, top, main och bottom, som alla omsluts av en wrapper div. Wrapper diven är 90% hög, top divern är fixed till 110 pixlar hög, och bottom är fixed ca 40pixlar hög. Nu vill jag ha att main, som ligger mellan top och bottom ska fylla ut resten av platsen på höjden. Men jag kommer inte på nåt bra sätt att göra det. Har sökt runt lite och det verkar vara ett ganska vanligt problem men jag har inte hittat någon lösning.

Försökte att helt enkelt göra mitten diven 100% hög men då blir den 100% +110px +40px hög... Finns det nån annan lösning? Det jag vill göra är alltså:

<code>

------------------ -
| 110px hög | |
------------------ |
| | |
| resten av | > 90 % hög
| utrymmet | |
------------------ |
| 40px hög | /
------------------ -

</code>

Försökte med:

<code>
<div id="container">
<div id="top">
<img src="images/toploga.jpg" />
</div>
<div id="main">
content
</div>
<div id="bottom">
</div>
</div>
</code>
CSS:
<code>
#container {
position:absolute;
margin-left:auto;
margin-right:auto;
margin-top:30px;
width:800px;
height:90%;
background:#ffffff;
padding:3px;
}
#top {
height:109px;
}
#main {
position:relative;
overflow:scroll;
overflow-x:hidden;
margin:auto;
height:100%;
}
</code>

Hade ett liknande problem för ett tag sedan.

Använde denna teknik: www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/

Funkade bra för mig.

Tack, ska kolla på det.

Tänk att det ska va så jobbigt att göra nåt som ja tycker låter jätte enkelt :p

Hm,

Upptäckte att bakgrunden i body ochså scrollas med den lösningen, vilket inte var så bra :S

Sätt den fixed?
background-attachment: fixed