无法修复 iframe 高度答案

【问题标题】：Not able to fix iframe height无法修复 iframe 高度
【发布时间】：2012-08-18 18:03:50
【问题描述】：

我有以下示例代码：

<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]）必须显示。如您所见，我为iframe 放置了height:100%，这意味着它占用了div 的高度。这就是问题开始的地方。 iframe 被裁剪。 IE。 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 的情况下完成这一切。

提前谢谢...

【问题讨论】：

呃.. 预计会投反对票...我的要求是如此复杂，这是我能解释的最多...如果您需要我澄清一些事情，请发表评论...
+1 取消 -1 无需解释。让每个人都有机会提问。

标签： css html iframe

【解决方案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;
*/
}

【讨论】：