0

次のサンプルコードがあります。

<style type="text/css">
.div_class
{
position:absolute;
border:1px solid blue;
left:50%;
margin-left:-375px;
margin-top:100px;
height:300px;
width:500px;
overflow:hidden;
}
.iframe_class
{
position:relative;
border:1px solid red;
height:100%;
margin-left:-218px;
margin-top:-110px;
}
</style>
<div class="div_class">
<iframe src="http://www.w3schools.com/" class="iframe_class" />
</div>

上記のコードでは、（位置[x = 218、y = 110]からの）一部のみを表示する必要があるをdiv囲みます。iframeご覧のとおり、私はそれがの高さを取ることを意味するheight:100%ために配置しました。ここから問題が始まります。iframeがトリミングされます。すなわち。iframeの右の境界線と下の境界線は、再配置に伴って移動しました。iframediv

必要なもの： iframeを再配置した後でも、右の境界線と下の境界線をそれぞれdivの右の境界線と下の境界線と一致させたいです。どうすればいいのですか？

ノート：

  1. http://www.w3schools.com/は例として取り上げられています。私の実際のコードでは、iframeソースはPHPスクリプトによって決定されます。
  2. 先ほど言ったように、srcはバックエンドスクリプトによって動的に決定されるため、iframeの高さを218+document_height_of_iframe_srcに設定できません。したがって、document_height_of_iframe_srcは私にはわかりません。document_width_of_iframe_srcの場合も同じです。
  3. JavaScriptを使用せずにこれらすべてを達成する必要があります。

前もって感謝します...

4

1 に答える 1

1

マージンと境界線のスタイルは、要素の幅/高さに含まれません。そのため、独自のレイアウト スペースがあります。これを修正するには、このようiframe_classに のコンテナ ( div_class) に下部パディングを追加します。

.div_class
{
position:absolute;
border:1px solid blue;
left:50%;
margin-left:-375px;
margin-top:100px;
height:300px;
width:500px;
overflow:hidden;
/*added to compensate iframe border (top+bottom)*/
padding-bottom:2px;
}
.iframe_class
{
position:relative;
border:1px solid red;
height:100%;
/*removed. messed the layout.
margin-left:-218px;
margin-top:-110px;
*/
}
于 2012-08-20T07:13:28.127 に答える