web-dev-qa-db-ja.com

div内にiframeをフィッティングする

Div内にiframeを収めようとしています。私の問題は、divの幅の100％にネストできないように見えることです。iframeのピクセル幅を指定する必要があります。

Iframeをdivの「内側」にしたいので、divがより小さなブラウザでサイズ変更された場合、iframeもサイズ変更されます。

これは私のコードです：

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

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;

}

以下は、ブラウザのサイズが変更されたときに起こることです。 enter image description here

csshtmllayoutiframe
20
Julia

このCSSは修正しますか？

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

この例から： http://jsfiddle.net/HNyJS/2/show/

22
G-Cyr

@better_use_mkstempによって提供されるリンクに基づいて、ネストされたiframeが親divを埋めるためにサイズ変更するフィドルです： 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>

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

完全にレスポンシブなiframe（私の場合はvimeoビデオ）をサイトに埋め込むためのより良いソリューションがあると思います。 iframeをdivにネストします。それらに次のスタイルを与えます。

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;
}

クライアントのために今やっただけで、それは働いているようです： http://themilkrunsa.co.za/

5
Bernard Myburgh