Beste lezer,
Ik ben veel aan het lezen geweest over html / div en css problemen betreft de bepaling van de hoogte. Vaak wordt er geroepen dat dit kan worden opgelost met de welbekende faux-columns... nu zit ik met een issue, waar dit niet mogelijk is! Ik ben zelfs al zo radeloos dat ik javascript overweeg...
De case is het volgende:
In mijn wrapper zitten meerdere divs.. ofcourse... Header --> ContentContainer --> Footer.
In de ContentContainer zitten meerdere genestelde divs genaamd Content aan de linkerkant en meerdere navigatiedivs aan de rechterkant waarvan de onderste gevuld is met een RSS-Feed. Nu wil ik dat de div van de RSS-feed automatisch wordt opgerekt tot de grote van de Content div, mocht er niet voldoende content zijn om de Content div te vullen, moet deze worden opgerekt tot fullscreen.
al mijn divs zijn relatief gepositioneerd in mijn CSS, gezien de content van alle divs (behalve header en footer) dynamisch is.
http://members.tele2.nl/wvmaaren/index_large.html <-- Dit is een voorbeeldje met een lange tekst, zo is hij goed!
http://members.tele2.nl/wvmaaren/index_short.html <-- Dit is een voorbeeldje met een korte tekst, hierin moet de content div dus tot fullscreen worden uitgevuld.
Ik hoop dat iemand een oplossing weet.
Groeten Wouter
Ik ben veel aan het lezen geweest over html / div en css problemen betreft de bepaling van de hoogte. Vaak wordt er geroepen dat dit kan worden opgelost met de welbekende faux-columns... nu zit ik met een issue, waar dit niet mogelijk is! Ik ben zelfs al zo radeloos dat ik javascript overweeg...
De case is het volgende:
In mijn wrapper zitten meerdere divs.. ofcourse... Header --> ContentContainer --> Footer.
In de ContentContainer zitten meerdere genestelde divs genaamd Content aan de linkerkant en meerdere navigatiedivs aan de rechterkant waarvan de onderste gevuld is met een RSS-Feed. Nu wil ik dat de div van de RSS-feed automatisch wordt opgerekt tot de grote van de Content div, mocht er niet voldoende content zijn om de Content div te vullen, moet deze worden opgerekt tot fullscreen.
al mijn divs zijn relatief gepositioneerd in mijn CSS, gezien de content van alle divs (behalve header en footer) dynamisch is.
http://members.tele2.nl/wvmaaren/index_large.html <-- Dit is een voorbeeldje met een lange tekst, zo is hij goed!
http://members.tele2.nl/wvmaaren/index_short.html <-- Dit is een voorbeeldje met een korte tekst, hierin moet de content div dus tot fullscreen worden uitgevuld.
Ik hoop dat iemand een oplossing weet.
Groeten Wouter
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
25
26
27
28
29
30
31
32
33
34
35
36
| <body>
<div id="wrapper">
<div id="header">
<div id="tabblad">hier zitten de tabbladen</div>
<div id="navbar">Hier zit een image die wisseld per categorie</div>
<div id="navbar_menu"><ul>hier komen de links</ul></div>
</div>
<div id="container">
<div id="content">
<asp:contentplaceholder id="ContentPlaceHolder" runat="server"></asp:contentplaceholder>
</div>
<div id="logo"></div>
<div id="contact"></div>
<div id="login"></div>
<div id="news">Hier komt de RSS feed</div>
</div>
<div id="footer">
<div id="footer_text">Footertekst</div>
</div>
</body> |
[ Voor 6% gewijzigd door Verwijderd op 16-12-2008 14:09 . Reden: Url toegevoegd ]
:strip_exif()/u/22670/td_icon2.gif?f=community)
/u/102549/gimp_logo_icon.png?f=community){kind=icon}
) kun je ineens de breedte instellen voor alle child-divs. Die hoef je dan niet meer te floaten én je hoeft er de breedte niet meer voor in te stellen. Scheelt een hoop typewerk.
).
./u/126415/Webberry_logo2008.png?f=community){kind=logo}
:strip_exif()/u/7759/red_cat.gif?f=community)