webentwicklung-frage-antwort-db.com.de

stellen Sie die Höhe des Iframes automatisch ein

Ich muss eine HTML-Seite in einen Rahmen einbetten und verwende den folgenden Code:

<iframe src="http://www.google.com" style="width: 90%; height: 300px"
    scrolling="no" marginwidth="0" marginheight="0" frameborder="0"
    vspace="0" hspace="0">

Ich versuche, die Höhe auf "Automatisch" zu setzen, damit der Rahmen automatisch an die Seitenlänge angepasst wird, ohne dass ich die Höhe hartcodieren muss. Ich habe versucht height:auto und height:inherit, aber es hat nicht funktioniert.

11
user1415780

Versuchen Sie diese Kodierung

<div>
    <iframe id='iframe2' src="Mypage.aspx" frameborder="0" style="overflow: hidden; height: 100%;
        width: 100%; position: absolute;"></iframe>
</div>
15
Golda

Wenn sich die Sites in separaten Domänen befinden, kann die aufrufende Seite aufgrund von Browser-übergreifenden Domänenbeschränkungen nicht auf die Höhe des Iframes zugreifen. Wenn Sie Zugriff auf beide Sites haben, können Sie möglicherweise den [document domain hack] . 1 verwenden. Dann sollten die Links von anroesti helfen.

3
jcaponi

Wenn Sie ein Framework wie Bootstrap haben, können Sie mit diesem Snippet ein beliebiges Iframe-Video erstellen: 

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="vid.mp4" allowfullscreen></iframe>
</div>
2
Solomon Antoine

Die Antwort von Salomon über Bootstrap hat mich dazu inspiriert, das CSS hinzuzufügen, das die Bootstrap-Lösung verwendet, was für mich wirklich gut funktioniert.

.iframe-embed {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}
.iframe-embed-wrapper {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
.iframe-embed-responsive-16by9 {
    padding-bottom: 56.25%;
}
<div class="iframe-embed-wrapper iframe-embed-responsive-16by9">
    <iframe class="iframe-embed" src="vid.mp4"></iframe>
</div>
1
user323774