web-dev-qa-db-ja.com

IFRAMEと競合する絶対位置

次のCSSを使用してIFRAMEのサイズを動的に設定したいと思います。

#myiframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

ただし、これをサポートしているブラウザはないようです。

優れたブラウザーでは、引用符で囲まれたCSSスタイルを使用してIFRAMEをDIVでラップし、IFRAMEの高さと幅を100％に設定できます。しかし、これはIE7では機能しません。 CSS式を使用する以外に、誰かがこれを解決することができましたか？

更新

MatTheCatは、IFRAMEが本体の真下にあり、body/htmlタグの高さが100％に設定されている場合に機能するシナリオで回答しました。私の最初の質問では、IFRAMEがどこにあり、どのようなスタイルがそのコンテナーに適用されているかについては述べていませんでした。うまくいけば、以下がこれに対処します：

<html>
    <body>
        <div id="container"><iframe id="myiframe"></iframe></div>
    </body>
</html>

そして、次のコンテナCSSを想定しましょう。

#container {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

ここでheight: 100%をIFRAMEに配置すると、サイズが正しくなりません。

cssiframecss-position
21
user140628

すべての側面のパディングにdivを使用します。親divの100％を使用してiframeを配置します。

http://jsfiddle.net/sg3s/j8sbX/

ここで、覚えておく必要のあることがいくつかあります。 iframeは元々インラインフレームであるため、最近のブラウザは気にしませんが、display：blockを設定します。デフォルトでは、境界線もあります。実行したいスタイリングは、代わりにiframeコンテナーで実行する必要があります。そうしないと、100％コンテナーの境界が破られます。

そして、これは私たちがその上に要素を置く方法です：

http://jsfiddle.net/sg3s/j8sbX/25/ （編集：私の悪い、IE7のiframeでborder = 0を設定する必要があります）

IE7 +で正常に動作するはずです（IE6は絶対配置+上/右/下/左を使用してレイアウトを与えることを好みません）

編集いくつかの追加の説明

主に、iframe自体のサイズを上/左/下/右に設定できないため、iframeコンテナのスタイルを設定する必要があります。しかし、うまくいくのは、その幅と高さを100％に設定することです。したがって、そこから始めて、ウィンドウ未満を100％にするために確実にスタイルを設定できる要素でiframeをラップするだけです。これは、親のいずれにも静的な高さ/幅がない場合に要素がデフォルトで使用するサイズです。

それについて考えると、実際に絶対値を削除してブロックすることができます。 http://jsfiddle.net/sg3s/j8sbX/26/ それでもIE7を再確認したいかもしれません。

Iframeを100％の高さと幅にした後、マージン、パディング、境界線を配置することはできません。これは、すでに100％の高さと幅に追加されるためです。したがって、overflow：visibleが発生するdivの場合は、コンテナよりも大きくなり、すべてがエッジを超えていることを示します。しかし、その結果、要素に指定したマージン、パディング、オフセットが台無しになります。実際、高さと幅を100％にするためには、iframeのデフォルトの境界線を削除する必要があります。

私の例では、iframeに大きな境界線（3pxなど）を追加して試してみてください。レイアウトにどのように影響しているかを簡単に確認できます。

22
sg3s

高さと幅を使ってみませんか？以下の例のように、上/下と左/右を設定することで、絶対位置を取得できます。

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            html, body {
                margin:0;
                padding:0;
                border:0px;
                height:100%;
                width:100%;
            }
            #container {
                position: absolute;
                top: 10px;
                bottom: 10px;
                left: 10px;
                right: 10px;
            }
            #myiframe {
                position: absolute;
                top: 0%;
                left: 0%;
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="container"><iframe id="myiframe"></iframe></div>
    </body>
</html>

これは私にとってはうまくいきます（IE9でテスト済み）。

5
S P
html,body {
    margin:0;
    padding:0;
    height:100%;
    min-height:100%;
}
#myiframe {
    width:100%;
    height:100%;
    border:0;
}

iE7でも問題なく動作します。

2
MatTheCat

このスタックオーバーフローの質問を見てください。それは役立つかもしれません：

コンテナの残りの高さの100％に合うようにIframeを作成します

0
InvisibleBacon