3

次のコードを検討してください。

<html>
<head>
<style>
html {height:100%;}
body {margin:0;}
iframe {height:100%;border:1px dotted red;}

.hdr {min-width:765px}
.logo_left {margin:4px}
.logo_right {float:right;margin:4px}
.menu {float:left;width:175px}
</style>
</head>
<body>

<div class="hdr">
    <img class="logo_left" src="img.png">
    <img class="logo_right" src="img2.png">
 </div>
<iframe class="menu" src="/menu.shtm"></iframe>
<iframe class="content" src="/home.htm"></iframe>
</body>
</html>

上記のコードから、最小幅のヘッダーがあり、ブラウザー ウィンドウの幅が拡大または縮小するにつれて拡大する可能性があります。ヘッダーの下には、高さを増やすことができる固定幅iframeがありますが、左側とヘッダーのすぐ下で固定されています。

私の問題はコンテンツiframe要素にあります。私が必要とするのは、上端と左端を所定の位置に固定し、右端と下端をブラウザで拡大および縮小することです。これを行う方法が見つかりません。

私は多くの質問を読み、良い答えがここにあり、それらの多くはdivタグで動作する傾向があります. iframeCSS と HTML 属性を厳密に使用して、コンテンツを希望どおりにレイアウトする方法はありますか。私の場合、JavaScript を使用できないため、それはオプションではありません。

iframeまた、幅と高さをパーセンテージで設定することは避けたいと思います。ヘッダーと左側のメニューの存在により、位置がずれています。この制限に余裕がある場合は、提案をお待ちしています。

コードからわかるように、両方のiframe要素の高さを 100% に設定しています。これは、これらのiframe要素が常にブラウザーの下限を超えて、ヘッダーの高さに等しいことを意味します。これは面倒ですが、私はそれと一緒に暮らすことができます。本当に必要なのは、コンテンツのiframe端をヘッダー、メニュー、およびブラウザー ウィンドウの対応する端に固定することです。これはできますか？

4

2 に答える 2

2

iframe の周りに div をラップし、これらの div を必要な下部、上部、および側面に完全に配置できます。

そのように:
http://jsfiddle.net/wKHVz/

<html>
    <head>
        <style>
            html {height:100%;}
            body {margin:0; min-height: 100%; position: relative;}
            .menuIframe, .contentIframe {width: 100%; height: 100%; border: none; }
            .menuIframe {background: #ff9999; }
            .contentIframe {background: #99ff99; }

            .logo_left {float: left; margin:4px}
            .logo_right {float:right; margin:4px}
            .menu {position: absolute; top: 50px; left: 0px; bottom: 0px; width:175px}
            .content {position: absolute; top: 50px; left: 175px; bottom: 0px; right: 0px;}
        </style>
    </head>

    <body>
        <div class="hdr">
            <img class="logo_left" src="img.png">
            <img class="logo_right" src="img2.png">
         </div>
        <div class="menu"><iframe class="menuIframe" src="/menu.shtm"></iframe></div>
        <div class="content"><iframe class="contentIframe" src="/home.htm"></iframe></div>
    </body>
</html>​​​​​​​​​​

この例では、ヘッダーに 50 ピクセルのスペースを与えていますが、これを必要なサイズのヘッダーに変更できます。両方の iframe の上部の値を変更するだけです。

于 2012-11-03T08:40:33.050 に答える
0

position:relative; であるラッパーに iframe をポップします。

于 2012-11-02T20:09:51.030 に答える