# iFrame Höhe auf mobilen Geräten



## the_black_hawk (17. November 2014)

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?


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


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

Ich freue mich auf eure Hilfe.


----------



## SpiceLab (17. November 2014)

the_black_hawk hat gesagt.:


> 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.


----------



## the_black_hawk (17. November 2014)

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..


----------



## SpiceLab (17. November 2014)

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.


----------

