1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

iFrame Höhe auf mobilen Geräten

Dieses Thema im Forum "HTML & XHTML" wurde erstellt von the_black_hawk, 17. November 2014.

  1. the_black_hawk

    the_black_hawk Erfahrenes Mitglied

    Hallo zusammen,

    um den Header einer Webseite mit meinem eigenen zu ersetzen, habe ich diese externe Webseite via iFrame eingebunden und eine feste Höhe von 2000px gegeben. Das funktioniert auf dem PC auch super, der iFrame ist groß genug für den Inhalt der externen Seite und via Scrollbar kann ich einfach nach unten scrollen - super.

    Jetzt habe ich meine Webseite auf dem Handy aufgerufen und musste feststellen, dass der eingebunden iFrame maximal so hoch ist wie das Handydisplay (und nicht die festen 2000px). Dadurch wird die Seite abgeschnitten. gescrollt werden kann nicht.

    Wie bekomme ich es hin, dass der iFrame auch auf mobilen Systemen eine feste Höhe hat, die über dem Handydisplay hinaus geht?

    Code (CSS):
    1. iframe {
    2. margin: 0;
    3. padding: 0;
    4. border: 0;
    5. width: 100%;
    6. height: 2000px;
    7. margin-top: -100px;
    8. }
    9. .wrapper {
    10. overflow: hidden;
    11. width: 100%;
    12. height: 2000px;
    13. }
    HTML:
    1. <div class="wrapper">
    2.     <iframe id="myframe" src="#url" scrolling="no"></iframe>
    3. </div>
    Ich freue mich auf eure Hilfe.
     
  2. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Mit welchem Handy-Typ hast du das festgestellt?

    Auf meinem "Samsung Galaxy Note 3 Neo" funktioniert das Scrollen einwandfrei.
     
  3. the_black_hawk

    the_black_hawk Erfahrenes Mitglied

    danke fürs probieren :)

    ich teste meine Seite auf einem Windows Phone, kann den Fehler aber auch im Entwicklermodus von Chrome reproduzieren (mobiles Gerät emulieren)

    Du kannst dir auch gerne mal die betroffene Seite direkt ansehen: http://musclehell-challenge.com/index.php/ChallengeRegister/2/

    Das ist eine Anmeldeseite die eingebunden wurde. Leider ist mobil der Anmeldebutton nicht ganz drauf..
     
  4. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Im landscape-Modus (Querformat) lässt sich die Seite auf meinem Smartphone auch nicht vollständig scrollen, im portrait-Modus (Hochformat) hingegen schon.

    Zu diesem Zeitpunkt kann ich soviel verraten, dass die Ursache in der eingebundenen CSS-Datei "style-3.css" zu suchen ist, wie ein lokaler Probelauf gerade ergeben hat. Nachdem ich dieses Stylesheet zu Testzwecken auskommentiert hatte, war das Scrollen auch im Querformat möglich.

    Entweder verhindert eines der gesetzten Media-Queries das Scrollen, oder es fehlt noch eine entsprechende Regelung für die kleineren Bildschirmauflösungen.
     
    Zuletzt bearbeitet: 17. November 2014
Die Seite wird geladen...