Ik ben bezig met het aanpassen van een layout zodat de pagina altijd 100% height heeft, minimaal. Op zich is dit te doen met height:100%, maar omdat er een banner bijzit en een andere div die bepaalde eisen stelt is dit wat moeilijker geworden (lees: buiten mijn css kennis).
Dit is de voorbeeld code:
en hier het resultaat.
Ik heb het even getest met IE, en daar zit dus die boxmodel bug in, maar dat is voor latere zorg. Het gaat om wat er in Opera en FF gebeurt. Ik wil de banner (het rode stuk) met een vaste hoogte helemaal boven hebben, met daaronder een content div. Zoals op de pagina te zien is moet er een margin van 15 pixels aan de bovenkant en linkerkant te zien zijn. Hij zou ook nog aan de onderkant moeten, maar daar zit nou het probleem.
Omdat er een height van 100% word meegegeven aan de content word hij zo geplaatst dat hij ook daadwerkelijk dezelfde height bezit als zijn parent, maar door de banner die er ook inzit valt het dus buiten het scherm. In principe zou het op te lossen zijn door de banner absoluut te positioneren, maar dan kom ik weer in de problemen met de margins van het grote blauwe vlak die dan ofwel onder de banner verdwijnen, met als gevolg dat er geen groene stukken meer tussen de banner en de content te zien is, ofwel hij doet hetzelfde als wat er nu gebeurt, ook weer door de margins.
Mijn vraag is: hoe krijg ik het voor elkaar dat de content (het blauwe stuk) meerekt met de rest van de pagina, maar wel met de margins intact?
In feite kan het ook zo worden gezien:
maar omdat dat niet mogelijk is zonder javascript zoek ik een alternatief, het liefst zonder tabellen.
edit: nu ik het zo lees lijkt het net of ik een request voor kant en klare html/css doe, maar dat is absoluut niet het geval
Dit is de voorbeeld code:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> #banner { height:145px; background-color:#a44; } #root { width:1000px; margin:auto; background-color:#ABDD42; height:100%; } #content { width:985px; margin-left:15px; margin-top:15px; height:100%; background-color:#8593D6; } html, body { margin:auto; height:100%; } </style> </head> <body> <div id="root"> <div id="banner"> </div> <div id="content"> </div> </div> </body> </html> |
en hier het resultaat.
Ik heb het even getest met IE, en daar zit dus die boxmodel bug in, maar dat is voor latere zorg. Het gaat om wat er in Opera en FF gebeurt. Ik wil de banner (het rode stuk) met een vaste hoogte helemaal boven hebben, met daaronder een content div. Zoals op de pagina te zien is moet er een margin van 15 pixels aan de bovenkant en linkerkant te zien zijn. Hij zou ook nog aan de onderkant moeten, maar daar zit nou het probleem.
Omdat er een height van 100% word meegegeven aan de content word hij zo geplaatst dat hij ook daadwerkelijk dezelfde height bezit als zijn parent, maar door de banner die er ook inzit valt het dus buiten het scherm. In principe zou het op te lossen zijn door de banner absoluut te positioneren, maar dan kom ik weer in de problemen met de margins van het grote blauwe vlak die dan ofwel onder de banner verdwijnen, met als gevolg dat er geen groene stukken meer tussen de banner en de content te zien is, ofwel hij doet hetzelfde als wat er nu gebeurt, ook weer door de margins.
Mijn vraag is: hoe krijg ik het voor elkaar dat de content (het blauwe stuk) meerekt met de rest van de pagina, maar wel met de margins intact?
In feite kan het ook zo worden gezien:
Cascading Stylesheet:
1
| #content { height:100% - 145px; } |
maar omdat dat niet mogelijk is zonder javascript zoek ik een alternatief, het liefst zonder tabellen.
edit: nu ik het zo lees lijkt het net of ik een request voor kant en klare html/css doe, maar dat is absoluut niet het geval
[ Voor 8% gewijzigd door truegrit op 22-07-2006 12:35 ]
hallo
:strip_exif()/u/105445/zidane2.gif?f=community)
:strip_icc():strip_exif()/u/29335/kp154c.jpg?f=community)