15

iframe要素をheight 100%とでラップwidth 100%したいdiv with fixed size。

私はこのように試しました：

<div style="height: 410px; width: 480px; border: 1px solid black; overflow: auto;">
    <iframe src="" style="border: none; background: blue;" height="100%" width="100%"></iframe>
</div>

古いDoctypeでは完全に機能しますが、HTML5 Doctypeを追加するとすぐに、周囲のdiv内で要素<!DOCTYPE html>全体iframeを上下に移動できる邪魔なスクロールバーが表示され、完全に下にスクロールすると奇妙なスペースができます.説明できません。

div スタイルからプロパティを削除してoverflow: auto;も機能しますが、これでは解決できません。

私が理解できないのは、iframe要素の下にこの奇妙なスペース/マージンがあるのはなぜですか?

これは、自分で試すことができるデモです: http://jsfiddle.net/tmuecksch/b5jgn/

Safari 7.0 と Firefox 23.0.1 で試しました。

4

4 に答える 4

25

要素に追加display:blockしますiframe。これがないと、インライン ボックスとしてレンダリングされます。そのため、同じ行に表示される可能性のある (架空の) テキストの g、p、f などのグリフの下の長さのためにスペースが残されます。

フィドルを参照してください：http://jsfiddle.net/b5jgn/2/

（vertical-align:bottomiframe も機能します。）

于 2013-09-08T14:48:40.850 に答える
0

私の意見ではseamless、HTML5 の新しい属性を使用するのが最善です。この属性やその他の新しい属性の詳細については、こちらを参照してください。したがって、コードは次のようになります<iframe src="" class="" seamless="seamless" style="border: none; background: blue;" height="100%" width="100%"></iframe>。残念ながら、かなり大きな問題は、この属性に対するブラウザーのサポートです。ただし、2013 年に更新されたブラウザは機能するはずです。それがうまくいくなら、今私にさせてください！Opera 15.0 と Chrome 29 でテストしたところ、動作しました。

于 2013-09-08T14:45:50.440 に答える