Hallo,
Ik ben bezig met het maken van een website, alleen nu heb ik wat bedacht, waarvan ik eigenlijk niet weet of dat het mogelijk is.
De website is opgebouwd in verschillende div's, waar onder een header, content en een footer.
De header en footer hebben een vaste hoogte en zijn gecentreerd.
Nu zou ik graag willen dat de content div zich inklemt tussen de header en footer, zodat dus als het browser venster kleiner wordtde header en footer gewoon blijven zitten, maar content kleiner word. Ik zat te denken aan max-height, maar daar kun je (dacht ik) alleen percentage's of pixels invoeren. eigenlijk zou dat moeten zijn: max-height:(100%-50px) bijvoorbeeld. waarbij dan de hoogte van de header+footer uiteraard 50px is.
Voorbeeld van mijn css:
En dit is een overzicht van de index pagina:
Wat ik dus heb geprobeerd te maken is een div die precies past, ongeacht de resolutie.
En natuurlijk dat er een scrollbalkje komt in de content div dmv overflow.
Weet misschien iemand of dat dit mogelijk is?
Alvast bedankt.
Peter
Edit: Hoop dat de css zo duidelijker is. In het edit-scherm springen de regels automatisch terug.
Ik ben bezig met het maken van een website, alleen nu heb ik wat bedacht, waarvan ik eigenlijk niet weet of dat het mogelijk is.
De website is opgebouwd in verschillende div's, waar onder een header, content en een footer.
De header en footer hebben een vaste hoogte en zijn gecentreerd.
Nu zou ik graag willen dat de content div zich inklemt tussen de header en footer, zodat dus als het browser venster kleiner wordtde header en footer gewoon blijven zitten, maar content kleiner word. Ik zat te denken aan max-height, maar daar kun je (dacht ik) alleen percentage's of pixels invoeren. eigenlijk zou dat moeten zijn: max-height:(100%-50px) bijvoorbeeld. waarbij dan de hoogte van de header+footer uiteraard 50px is.
Voorbeeld van mijn css:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| body{max-height:100%;background: #fff url(images/background.png) no-repeat center top;
padding:0;margin:0;}
body,td,th{color:#666;font-family:Lucida Sans Unicode, Lucida Grande,
sans-serif;font-size:12px;}
#top_container{background-color:#FFF;color:#FFF;height:131px;margin:0;padding:0;
text-align:center;}
#top2{background:url(images/header.png);height:131px;margin:0 auto;padding:0;
text-align:left;width:993px;}
#content_container{background: url(images/background.png) no repeat;
border:0px solid #258;color:#666;margin:0px auto 0;padding:0;text-align:left;
width:950px;}
#content_left{color:#FFF;background-color:transparent;float:left;margin:0;padding:0px;
text-align:left;width:950px;}
#content_left td, #content_left td a, #content_left td a:visited{color:#8c8c8c;
text-decoration:none;}
#content_left table tr td {padding:1px;}
#footer{bottom:0px;position:absolute; height:94px;width:100%;
padding-bottom:0px;margin-bottom:0px;background-position:center;
background:url(images/footer.png) no-repeat;background-position:center;} |
En dit is een overzicht van de index pagina:
code:
1
2
3
4
5
6
7
8
9
10
11
12
| <body>
<div id="top_container">
<div id="top2">
</div>
</div>
<div id="content_container">
<div id="content_left">
</div>
</div>
<div id="footer">
</div>
</body> |
Wat ik dus heb geprobeerd te maken is een div die precies past, ongeacht de resolutie.
En natuurlijk dat er een scrollbalkje komt in de content div dmv overflow.
Weet misschien iemand of dat dit mogelijk is?
Alvast bedankt.
Peter
Edit: Hoop dat de css zo duidelijker is. In het edit-scherm springen de regels automatisch terug.
Waze Nederland - peter@wazenederland.nl
:strip_icc():strip_exif()/u/43400/avatar.jpeg?f=community){kind=avatar}
/u/102932/crop59bbb38884370_cropped.png?f=community)
:strip_icc():strip_exif()/u/141451/Dolphin.jpg?f=community)
:strip_exif()/u/13818/episodebutler_60x60.gif?f=community)
Dus dat gaat niet werken en volgens mij zijn er nog genoeg die er wel mee werken..
Het werkt super!!