iframe在<div> </div>中切断了大部分内容

Question

我试图将FRED经济储备中的图表嵌入到我的网站中，它显示在图表的左上角，但却切断了剩下的内容。

以下是放置iframe的index.html文件的一部分：

<div class="box" id="retailbox">
    <iframe src="http:////research.stlouisfed.org/fred2/graph/graph-landing.php?g=GEt" frameborder="0" scrolling="no" onload="" allowtransparency="true"></iframe>
</div>  

以下是CSS的相关部分：

#retailbox {
    border: solid #a08db7;
    position: absolute;
    margin: 38% 53% auto;
}

以下是问题的屏幕截图：

我尝试从另一个主题添加这个css并相应地编辑html无效：

div#content iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

修改： 当我允许滚动时，iframe显然是div的正确大小，它只是没有显示大部分内容。 提前谢谢，希望我只是犯了一个粗心的错误。

Answer 1

这里有一个JSFiddle，其中有一个工作示例。我删除了边距，因为调试时很烦人。

#retailbox {
    border: solid #a08db7;
    height: 500px;
    width: 500px;
    position: relative;
}
iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

基本上：

1. 您的选择器出现问题但未选择任何div#content iframe不存在的内容。
2. 您在没有设置宽度/高度的相对父级的元素上设置height: 100%;和width: 100%;，因此无需计算任何内容。

Answer 2

您需要为iframe提供有关如何展示自身的一些风格指导。它不会扩展以包含其内容：

#frame {
    height: 100%;
    width: 100%;
position: absolute; 


}

http://jsfiddle.net/3RKg7/