it-swarm.com.de

Einbau eines Iframes in ein Div

Ich versuche, einen iframe in ein div einzubauen. Mein Problem ist, dass ich es nicht auf 100% der Breite des Div verschachteln kann. Ich muss die Pixelbreite des Iframes angeben.

Ich möchte, dass sich der iframe "innerhalb" des div befindet, sodass die Größe des iframe auch geändert wird, wenn die Größe des div durch einen kleineren Browser geändert wird.

Das ist mein Code:

<div class="row-fluid">
    <div class="span9" id="standard">
        <div class="header-box">
        <p class="header" >Bla Bla Header</p>
        </div>
        <div id="wrap">
    <iframe id="frame" src="https://docs.google.com/a/...."frameborder="0"></iframe>
        </div>
        </div>
(more things in the row)
</div>

Und CSS:

#wrap { width: 1130px; height: 100%; padding: 0; 
        overflow: hidden; position:relative;}
#frame { width: 100%; height: 100%; 
        border: 1px solid black; position:relative; }
#frame {
zoom: 0.75;
-moz-transform: scale(0.75);
-moz-transform-Origin: 0 0;
-o-transform: scale(0.75);
-o-transform-Origin: 0 0;
-webkit-transform: scale(0.75);
-webkit-transform-Origin: 0 0;

}

Nachfolgend wird beschrieben, was passiert, wenn die Größe des Browsers geändert wird. enter image description here

20
Julia

Würde dieses CSS das Problem beheben?

iframe {
    display:block;
    width:100%;
}

Aus diesem Beispiel: http://jsfiddle.net/HNyJS/2/show/

22
G-Cyr

Basierend auf dem von @better_use_mkstemp bereitgestellten Link, ist hier eine Geige, bei der die Größe des geschachtelten Iframes geändert wird, um die übergeordnete Div zu füllen: http://jsfiddle.net/orlenko/HNyJS/

HTML:

<div id="content">
    <iframe src="http://www.Microsoft.com" name="frame2" id="frame2" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" onload="" allowtransparency="false"></iframe>
</div>
<div id="block"></div>
<div id="header"></div>
<div id="footer"></div>

Relevante Teile von CSS:

div#content {
    position: fixed;
    top: 80px;
    left: 40px;
    bottom: 25px;
    min-width: 200px;
    width: 40%;
    background: black;
}

div#content iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}
7
orlenko

Möglicherweise habe ich eine bessere Lösung, um einen vollständig reaktionsfähigen Iframe (in meinem Fall ein Vimeo-Video) in Ihre Website einzubetten. Verschachtele den Iframe in einem Div. Gib ihnen die folgenden Stile:

div {
    width: 100%;
    height: 0;
    padding-bottom: 56%; /* Change this till it fits the dimensions of your video */
    position: relative;
}

div iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
}

Habe es gerade für einen Kunden gemacht und es scheint zu funktionieren: http://themilkrunsa.co.za/

5
Bernard Myburgh