0

iframeを絶対位置に配置し、左、上、右、下のオフセットを定義したい：

#x {
    position: fixed;
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    height: auto;
    border: 2px solid #aaa;
    z-index: 100002;
    background: #abc;
    display:none
}​

左と上の値が尊重され、右と下の値は無視されることがわかりました。左と上の値を設定していない場合、右と下の値は正しく扱われます。このフィドルを確認してください：http：//jsfiddle.net/7fTEF/

何か案が？

ビューポートを基準にして要素の幅と高さを設定したくないことに注意してください。また、幅と高さをパーセンテージに設定したり、境界線のオフセットを固定値に保ちたいだけです。ここで「10px」と言います。

4

4 に答える 4

2

理由はわかりませんが、少し遊んだ後、IFrameは何らかの理由でそのスタイルのポジショニングを好まないようです。

私が作成できる解決策の1つは、それをdivにコンテナー化し、divを必要なサイズ/位置にすることでした。

http://jsfiddle.net/7fTEF/1/

また、500x500pxであるにもかかわらず、本文の背景色はページ内のすべてのスペースを埋め続けますが、divのサイズは正しいままです。（本体のサイズを変更して確認してください。。。。）

于 2012-08-19T23:21:31.293 に答える
1

コンテナのサイズは、javascriptを介して、iframeのサイズを設定した後に確認できます。

于 2012-08-19T23:20:28.623 に答える
1

左と右の両方、または上と下の両方のプロパティを設定することはできません。 編集：私がこの記事から学んだように、あなたが絶対にポジショニングしていることを実際に提供できることがわかりました：http: //www.alistapart.com/articles/conflictingabsolutepositions（ヒントについては@thirdenderへのすべてのクレジット！）。ただし、Iframeの動作は異なるようです。

あなたはこのようにあなたが何をしたいのかを達成することができます：http：//jsfiddle.net/7fTEF/2/

絶対的な位置付けは必要ないことに注意してください。また、css3プロパティのボックスサイズを使用しました。ここで説明されているように、ブラウザ固有のプレフィックスを追加する必要がありますhttp://www.w3schools.com/cssref/css3_pr_box-sizing.asp

このソリューションは古いブラウザでは機能しないことに注意してください。スクロールバーが表示されます。完全にブラウザ互換にしたい場合は、yoyがいくつかのjsに頼らなければならないと思いますが、これを無効にしている人には問題があります。両方の組み合わせを試すこともできます。それはすべてあなたの聴衆とあなたがそれを見つける輸入方法に依存します...

于 2012-08-19T23:22:50.443 に答える
0

このページはhttp://www.alistapart.com/articles/conflictingabsolutepositions/にあり、CSSだけを使用する古いIEブラウザーとも互換性のあるいくつかのソリューションについて説明しています。そうでなければ、JavaScriptの計算がおそらく必要になるでしょう。

于 2012-08-19T23:50:54.033 に答える