html - iframeの100％の高さの問題

Question

この号では、iframeが青いボックス全体を占めるようにします。

フィドル

幅と高さを100％にしましたが、高さは効果がありません。修正はありますか？

Answer 1

に変更display: table-rowしますdisplay: block。pxまた、div を埋めるための高さのパーセンテージは、親コンテナーの高さが固定されている場合にのみ機能することに注意して%ください。これが修正されたフィドルです。

それ以外の場合は、独自のレイアウトで試すことができます。position: absolute;width:300px;height:250px;しかし、あなたの divに追加してください#two。パーセンテージを使用して要素を表示する場合は、その親コン​​テナーの属性 (幅と高さ) を定義する必要があります。そうしないと、子は引き伸ばされません。

これがフィドルです。

Answer 2

青い divposition: relativeを作成し、iframe に次の css を使用できます。

iframe {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

#two {
    position: relative;
    /* other CSS for #two */ 
}

フィドル

Answer 3

cssで<div id="two">aheight:100%を指定します。iframe は親要素を埋める必要がありますが、高さが設定されていないと機能しません。

Answer 4