iFrame Höhe auf mobilen Geräten

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?

CSS:
iframe {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 2000px;
margin-top: -100px;
}
.wrapper {
overflow: hidden;
width: 100%;
height: 2000px;
}

HTML:
<div class="wrapper">
    <iframe id="myframe" src="#url" scrolling="no"></iframe>
</div>

Ich freue mich auf eure Hilfe.
 
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.
Mit welchem Handy-Typ hast du das festgestellt?

Auf meinem "Samsung Galaxy Note 3 Neo" funktioniert das Scrollen einwandfrei.
 
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:
Zurück