Question

我正在尝试构建一个包含标题和左侧边栏的页面，并在内容区域中有一个iframe。我不想在iframe区域填充整个内容区域（空白区域），但似乎无法让它工作。我正在寻找完美适合的IFrame，这意味着它从标题和左侧菜单边缘结束开始。我似乎只能将它从页面的一边延伸到另一边，或者将它放在空白的中间。

有人可以帮忙吗？

这是JsFiddle：http://jsfiddle.net/P9CH9/2/

删除<div id="iframe-content">后，它会从页面的一侧跨越iframe到另一侧。

Answer 1

我能够通过手动将边距顶部和左边添加到iframe容器中来实现我想要的效果，并将Top，left，right，bottom设置为0：

.abs-frame-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-left: 250px;
margin-top: 55px;
}

这是最新的JFiddle，我添加了黑色以显示iframe的位置，因为JsFiddle似乎不允许使用iframe。 http://jsfiddle.net/P9CH9/4/

Answer 2

你为wrappend设置了宽度100％并修复了菜单，所以包装器根本不考虑菜单并获得屏幕的整个宽度

主要修改：

.menu {
    background: none repeat scroll 0 0 #202020;
    float: left;
    margin-top: 55px;
    position: fixed;
    width: 25%;
    height: 100%;
    z-index: 2147483647;
}

.wrapper {
    float: left;
    margin-top: 55px;
    width: 75%;
    margin-left: 25%;
}

此解决方案具有响应性。

请参阅：http://jsfiddle.net/joseapl/P9CH9/5/

用iframe填充空格（jsfiddle）

2 个答案: