Question

我有以下网页：

<div id = "wrapper">
    <div id="leftmenu>
    ...
    </div>
    <div id="search">
    ...
    </div>
    <div class="Container">
            <div id="content">
                <iframe id="iF" name="if" src=""></iframe>
            </div>
        </div>
</div>

它基本上显示顶部左侧搜索栏中的菜单和iframe，搜索栏下方和菜单旁边的内容。我遇到的问题是我不希望它在ifram中显示垂直和水平滚动条，而是使用浏览器滚动条。

如果我在css中设置如下：

.Container
{
    position:absolute;
    width:100%;    
    height:100%;
    left:180px;
}

它会删除水平滚动条，但不会删除垂直滚动条。任何人都可以指导我如何从iframe中删除此垂直滚动条。

Answer 1

在您的iframe上尝试：overflow: hidden;。

#content iframe {
    overflow: hidden;
}

Answer 2

iframe应该有一个滚动属性，你可以设置为no，负责滚动。

iframe不知道它需要比它所在的页面大。如果你知道你试图在iframe中显示的页面的高度，你可以相应地设置iframe高度。

话虽这么说，如果您正在显示的页面可能会改变大小，那么您的维护会使这变得毫无意义。

查理弗兰克的答案对于相同的域名应用程序都有好处。

Answer 3

试试这个... iframe加载后，使用javascript调整大小。只有当iframe src属于同一个域时才会起作用。

<div id = "wrapper">
    <div id="leftmenu>
    </div>
    <div id="search" >
    </div>
    <div class="Container">
            <div id="content">
    <iframe id="iF" onload="resize(this)" name="if" src="/"></iframe>
            </div>
        </div>
</div>
    <script>
function resize(elem){
    var outer=elem;
    var inner=elem.contentDocument.documentElement;    
    outer.style.border="0";
    outer.style.overflow="hidden";
    outer.style.height=Number(inner.scrollHeight+10)+"px";
    outer.style.width=Number(inner.scrollWidth+10)+"px";
}
</script>

如何从页面内的iframe中删除垂直滚动条

3 个答案: