iFrame 100% height in IE7 werkt niet

Pagina: 1
Acties:

Acties:
  • 0 Henk 'm!

  • pauldegroot
  • Registratie: April 2006
  • Niet online

pauldegroot

silent sounds

Topicstarter
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:
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 :)

Acties:
  • 0 Henk 'm!

Verwijderd

Gokje: height op je content div gooien.

Acties:
  • 0 Henk 'm!

  • pauldegroot
  • Registratie: April 2006
  • Niet online

pauldegroot

silent sounds

Topicstarter
Als ik dat doe dan neemt de content div het gehele scherm in beslag.

Acties:
  • 0 Henk 'm!

Verwijderd

Ik heb nooit gezegd dat je em height: 100% moet geven toch ;)

Eigenlijk wilde ik weten of het gelukt was met het bepalen van de hoogte van je iFrame in IE7 (want dat was je probleem toch?)

Als het instellen van een hoogte op de content div leidt tot de oplossing van het probleem (iFrame schaalt niet mee), dan kun je vast zelf wel verzinnen welke hoogte je moet instellen, en hoe je de zooi moet positioneren.

(Waarom alles absoluut trouwens?)

Acties:
  • 0 Henk 'm!

  • pauldegroot
  • Registratie: April 2006
  • Niet online

pauldegroot

silent sounds

Topicstarter
Ja dat absoluut heeft inderdaad weinig zin, staat nu op relative.

Oké nog even iets verder gegaan en ik heb een idee, alleen weet ik niet of het werkt.

Als ik de content div vergroot naar bijv 500px hoog dan schaalt het frame niet mee.
Als ik aan het iframe een height meegeef dan pakt hij hem uiteraard wel.

Nou vraag ik me dus af of ik bijvoorbeeld via javascript ook ervoor kan zorgen dat de height van het frame het browserscherm wordt minus 28px+15px van de header en footer en dat dit bij een window resize nog steeds goed gaat.

Is dit mogelijk?

Acties:
  • 0 Henk 'm!

Verwijderd

Ja dat is mogelijk. Maar ik betwijfel of je dat wilt. Als mensen namelijk zonder javascript surfen, wordt je pagina niet correct weergegeven.

Misschien moet je iframe eens proberen een height attribute te geven ipv via css te vogelen.

Acties:
  • 0 Henk 'm!

  • pauldegroot
  • Registratie: April 2006
  • Niet online

pauldegroot

silent sounds

Topicstarter
Dat is juist het probleem. IE7 heeft een bug waardoor de height attribute niet werkt in een iFrame.

Acties:
  • 0 Henk 'm!

  • MueR
  • Registratie: Januari 2004
  • Laatst online: 10:22

MueR

Admin Tweakers Discord

is niet lief

Misschien moet je gewoon geen iframes gebruiken dan. Die content hoort gewoon in je pagina, zet hem daar dan ook, in plaats van moeilijk doen om workarounds voor bugs te vinden. Overigens kan ik die bug ook niet vinden op het internet?

Anyone who gets in between me and my morning coffee should be insecure.


Acties:
  • 0 Henk 'm!

  • pauldegroot
  • Registratie: April 2006
  • Niet online

pauldegroot

silent sounds

Topicstarter
Nou ik vind het erg handing in de zin dat ik dan heel snel en gemakkelijk een nieuwe pagina toe kan voegen zonder de index mee te moeten nemen.

Ik ben verder ook niet heel erg thuis in het maken van websites maar als iemand mij de juiste kant op kan sturen kan ik het zelf via google wel verder uitzoeken dan.

De bedoel is dus dat de header en footer allebei een vaste hoogte hebben en dat de overige ruimte voor content gebruikt kan worden.

Acties:
  • 0 Henk 'm!

  • CH4OS
  • Registratie: April 2002
  • Niet online

CH4OS

It's a kind of magic

Waarom gebruik je een iframe binnen een div? :) Dat ontgaat me ook volledig.
De iframe is ook te stylen, al zou ik eerder een iframe vermijden.

Ook is de center tag inmiddels naar mijn weten sinds HTML 4.0 deprecated. :)
pauldegroot schreef op dinsdag 29 september 2009 @ 17:15:
Nou ik vind het erg handing in de zin dat ik dan heel snel en gemakkelijk een nieuwe pagina toe kan voegen zonder de index mee te moeten nemen.
Tja, je menu zal je er eventueel toch op moeten aanpassen, dus ik zie het probleem niet.
Ik ben verder ook niet heel erg thuis in het maken van websites maar als iemand mij de juiste kant op kan sturen kan ik het zelf via google wel verder uitzoeken dan.
Is ook iets wat veel gezegt word, jezelf er een beetje inlezen kan vast geen kwaad; anders maakt oefening wel kunst, zoals iedereen dat zo heeft moeten leren. ;)

Acties:
  • 0 Henk 'm!

  • Ch3cker
  • Registratie: Mei 2008
  • Laatst online: 17-09 14:03

Ch3cker

Testlab Teamlead
code:
1
 <iframe name="iframe" src="photo/portretten/portretten.html" style="width:100%; min-height:100%; height:auto" frameborder="0">


Waarom zo moeilijk ? Gewoon :

code:
1
 <iframe name="iframe" src="photo/portretten/portretten.html" width="100%" "height="100%" frameborder="0">

Acties:
  • 0 Henk 'm!

  • pauldegroot
  • Registratie: April 2006
  • Niet online

pauldegroot

silent sounds

Topicstarter
Ja dat dacht ik ook eerst, het is meer zo dat ik gewoon zover was toen ik dit bericht postte.

Met de standaard height attrib werkt het ook niet namelijk.
IE7 snapt wel de width="100%" maar niet de height, dat is die bug.

Er zijn meer mensen met het probleem. kijk maar.

Acties:
  • 0 Henk 'm!

  • Ch3cker
  • Registratie: Mei 2008
  • Laatst online: 17-09 14:03

Ch3cker

Testlab Teamlead
Bij mij doet ie dat anders prima..

  • pauldegroot
  • Registratie: April 2006
  • Niet online

pauldegroot

silent sounds

Topicstarter
Nou hier in IE7 werkt de site toch echt niet zoals het hoort.

Zou iemand mij alsnog een beetje de goede richting in willen sturen qua javascript?
De mensen die mijn site willen zien moeten ook flash hebben dus javascript zal vast ook wel aanstaan dan.

  • Da Weef
  • Registratie: Januari 2004
  • Laatst online: 15-09 09:16
Je kan met javascript vrij eenvoudig de hoogte ophalen van de div en deze dan meegeven aan de iframe, zoek eens op offsetHeight.

Zoals hierboven reeds wordt vermeld verdient een oplossing met iframes meestal niet de schoonheidsprijs.Ik ga ervan uit dat je net bent begonnen met webdesign en dan zijn lijken iframes een eenvoudige oplossing.
Echter zodra je wat hebt gelezen over server-side-includes (SSI) zul je snel tot de conclusie komen dat dat net zo eenvoudig is, maar dan SEO vriendelijk, zonder cross-browser gedoe en betere performance...

.


Verwijderd

Ik heb geen IE7, maar kun je je iframe niet absolute positioneren in je div en dan met top:0 en bottom:0 werken?

Acties:
  • 0 Henk 'm!

  • pauldegroot
  • Registratie: April 2006
  • Niet online

pauldegroot

silent sounds

Topicstarter
Hé ik wilde iedereen nog bedankt voor de tips, maar ik ben toch maar een andere website gemaakt.

@Da Weef: ik heb helemaal niks in webdesign gedaan vandaar dat ik het misschien niet allemaal snap.

Acties:
  • 0 Henk 'm!

Verwijderd

Da Weef schreef op woensdag 30 september 2009 @ 16:00:
..Lijken iframes een eenvoudige oplossing.
Echter zodra je wat hebt gelezen over server-side-includes (SSI) zul je snel tot de conclusie komen dat dat net zo eenvoudig is, maar dan SEO vriendelijk, zonder cross-browser gedoe en betere performance...
Ik zou hier zeker even op googelen. Het is even inlezen maar je bent je vervelende workarounds allemaal kwijt en het is ook een stuk netter. :) En voor een beginner ook zeker goed te doen!
Pagina: 1