iframe 截断 <div> 内的大部分内容

Question

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

这是 index.html 文件中放置 iframe 的部分：

<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%;，该元素没有具有设置宽度/高度的相对父元素，因此它没有任何可计算的内容。