Question

我有以下示例代码：

<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>

在上面的代码中，div包含iframe，其中只有一部分（来自位置[x = 218，y = 110]）必须显示。正如您所看到的，我为height:100%放置了iframe，这意味着它需要div的高度。这是问题开始的地方。 iframe被裁剪。即。 iframe的右边框和底边框已随着重新定位而移动。

我想要的是什么：即使在重新定位iframe之后，我也希望右边框和底边框分别与div的右边框和下边框重合。我该怎么做？

注意：

http://www.w3schools.com/就是一个例子。在我的实际代码中，iframe源将由PHP脚本决定。
我无法将iframe高度设置为 218 + document_height_of_iframe_src ，因为我说src是由后端脚本动态决定的。所以 document_height_of_iframe_src 对我来说是未知的。 document_width_of_iframe_src 。
我必须在不使用JavaScript的情况下完成所有这些。

提前致谢...

Answer 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;
*/
}

无法修复iframe高度

1 个答案: