Archief - Body hoogte afhankelijk van de scherm resolutie

Hallo,

Ik heb een 'standaard' layout voor mijn website:
- header
- menu/content
- footer.

Maar nu wil ik dat de site, afhankelijk van de scherm resolutie, altijd de volledige scherm hoogte benut. De consequentie hiervan is dan dat het midden deel dynamisch moet worden.
EN ik wil eigenlijk ook nog een min. hoogte. Bv. als iemand een scherm resolutie heeft van 640 x 480 dat dan de body hoogte 600px wordt.

Is dit mogelijk? Of ga ik volledig de verkeerde kant op?

Bijvoorbeeld:
Scherm resolutie is 1400 x 900 px.
Navigatie bar = 20 px:
developer bar = 10 px;
tab bar = 10px;
De body height zou dan in dit geval moeten zijn:
body {
height: 900 - 20 -10 -10=860px;
}

In geval van dat de resolutie bv. 1600 x 1024 is wordt de body height:
body {
height: 1024 - 20 -10 -10=984px;
}

Het content deel is in het 1e voorbeeld 124px lager maar dit dacht ik op te lossen door voor dit deel de div op 100% te zetten zodat de hoogte zich automatisch stretcht tot de footer.

Heeft iemand een idee of dit kan (al dan niet icm. js) en evt. een voorbeeld/oplossing?

Alvast bedankt

Nico

A CSS Sticky Footer

Ik denk dat je met dit voorbeeld het gewenste effect wel kan bereiken. Vroeger werkte ik het ook veel met sticky footers en zo maar daar ben ik na verloop van tijd van afgestapt. Het effect is de extra moeite die je moet doen niet waard.

Je kan dit ook met javascript doen met het onresize event. Nu dit werkt wel in alle browsers maar soms is het effect niet zo "mooi". Je kan dan zoals je zegt gewoon bereken hoe groot het moet zijn.

Misschien dat javascript nog de beste oplossing is. Zie gewoon dat de site nog werkt als je javascript afzet.