legen Sie die iframe Höhe automatisch

Muss ich das einbetten einer HTML-Seite in einen Rahmen, und bin mit dem 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 auto gesetzt, so dass die frame-auto-Größe zu der Seite, Länge ohne hartcodieren der Höhe wie ich es hier mache. Ich habe versucht height:auto und height:inherit aber es hat nicht funktioniert.

Haben Sie versucht, die Einstellung height:100% wenn der iframe in den Körper, dass sollte es füllt den Körper?
Duplikate: This oder this > beide sollte Ihre Frage beantworten.

InformationsquelleAutor user1415780 | 2013-03-06

  1. 14

    Versuchen, diese Codierung

    <div>
    <iframe id='iframe2' src="Mypage.aspx" frameborder="0" style="overflow: hidden; height: 100%;
        width: 100%; position: absolute;"></iframe>
</div>
    Hinweis: ich habe festgestellt, mit der Art, Höhe und Breite ist glitchy. Die Attribute height und width sind das wichtigste hier, scheint konsequent zu arbeiten. Gibt es einen Grund, warum man beides benutzt?
    % iframe-Höhe/Breite ist ungültig HTML5 pro spec (es gültig war, bevor, wenn)

    InformationsquelleAutor Golda

  2. 3

    Ob die Websites auf unterschiedlichen domains, die aufrufende Seite kann nicht auf die Höhe des iframe-aufgrund von cross-browser, domain-Beschränkungen. Wenn Sie Zugriff auf beiden Seiten, Sie können möglicherweise verwenden Sie die [Dokument domain-hack].Eins Dann anroesti die links sollte helfen.

    Diese Bibliothek, die auf GitHub löst die cross-domain-problem, zusammen mit der Herstellung sicher, dass der iFrame bleibt so bemessen, dass die Inhalte, wenn sich die Dinge ändern. github.com/davidjbradshaw/iframe-resizer

    InformationsquelleAutor jcaponi

  3. 2

    Wenn du ein framework wie Bootstrap man machen kann, keine iframe-video reagiert durch die Verwendung dieses snippet: 

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

    InformationsquelleAutor Solomon Antoine

  4. 1

    Salomos Antwort über bootstrap mich dazu inspiriert, fügen Sie die CSS-bootstrap-Lösung verwendet, die funktioniert wirklich gut für mich.

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

    InformationsquelleAutor user323774

Schreibe einen Kommentar