Hallo,
Ik ben bezig mijn website te updaten wat inmiddels zo goed als klaar is.
Echter loop ik nu tegen een probleem aan.
Mijn website bestaat uit een wrapper met daarin verticaal een header, content en een footer div erin.
De header en footer zijn allebei een vaste hoogte, in de content div zit een iFrame dit ik met height=100% mee laat schalen in de content div.
Dit werkt allemaal goed in FF, Chrome, Opera en IE8 maar niet in IE7.
In IE7 is de content div wel een goed formaat maar schaalt de iFrame niet mee in de hoogte.
Nou heb ik de afgelopen twee dagen gezocht naar een oplossing en ik ben er verschillende tegen gekomen maar geen van allen werken bij mij. De javascript oplossingen als deze werken wel in zeker hoogte zij het niet zo dat die over mijn footer heen gaan en een scrollbar introduceren. Ook de dingen die ik zelf bedacht heb werkten helaas niet.
Mijn vraag is dus of iemand mij kan helpen om ervoor te zorgen dat de iFrame de volledige hoogte van mijn content div vult.
De code:
En de bijbehorende CSS:
Bij voorbaat dank
Ik ben bezig mijn website te updaten wat inmiddels zo goed als klaar is.
Echter loop ik nu tegen een probleem aan.
Mijn website bestaat uit een wrapper met daarin verticaal een header, content en een footer div erin.
De header en footer zijn allebei een vaste hoogte, in de content div zit een iFrame dit ik met height=100% mee laat schalen in de content div.
Dit werkt allemaal goed in FF, Chrome, Opera en IE8 maar niet in IE7.
In IE7 is de content div wel een goed formaat maar schaalt de iFrame niet mee in de hoogte.
Nou heb ik de afgelopen twee dagen gezocht naar een oplossing en ik ben er verschillende tegen gekomen maar geen van allen werken bij mij. De javascript oplossingen als deze werken wel in zeker hoogte zij het niet zo dat die over mijn footer heen gaan en een scrollbar introduceren. Ook de dingen die ik zelf bedacht heb werkten helaas niet.
Mijn vraag is dus of iemand mij kan helpen om ervoor te zorgen dat de iFrame de volledige hoogte van mijn content div vult.
De 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
| <html> <body> <div id="maincontainer"> <div id="top"> <div id="menu"> <center> //MENU </center></div> <div id="logo"></div></div> <div id="content"> <iframe name="iframe" src="photo/portretten/portretten.html" style="width:100%; min-height:100%; height:auto" frameborder="0"> Sorry, je browser ondersteunt geen frames... </iframe> </div> <div id="bottom"> <div id="leftfooter"> //FOOTER LINKS </div> <div id="rightfooter"> //FOOTER RECHTS </div></div></div> </body> </html> |
En de bijbehorende CSS:
Cascading Stylesheet:
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
37
38
| #top { background-repeat: repeat-x; height: 28px; width: 100%; position: absolute; top: 0px; left: 0px; right: 0px; background-color: #303030; } #maincontainer { height: 100%; width: 100%; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; } #content { background-color: #0d0d0d; position: absolute; width: 100%; top: 28px; bottom: 15px; } #bottom { height: 15px; width: 100%; bottom: 0px; left: 0px; right: 0px; position: absolute; background-color: #303030; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFF; } |
Bij voorbaat dank