JS - iframe高度为100%且没有滚动(在体内滚动)

时间:2011-05-10 20:41:49

标签: javascript iframe height

我有一个iframe问题。首先,我在https://stackoverflow.com/search?tab=relevance&q=iframe%20height中搜索关键字iframe height,但我找不到我需要的人。

如何使用100%制作iframe wicth高度而不滚动。滚动身体。

<body style="scroll-x:hidden;scroll-y:auto;">
<iframe frameborder="0" id="iframe" scrolling="no" src="http://www.google.com" style="width:960px;height:100%" height="100%" width="960"></iframe>

如果我在iframe中通过http://www.google.com搜索内容,请转到Google搜索结果页面。 iframe将计算新的高度,仍然使用iframe高度100%,身体部分的滚动条。 (我希望一些帮助可以完美地工作,不仅在ie和firefox,还有safari和chrome)。非常感谢。

3 个答案:

答案 0 :(得分:5)

这应该做你想要的:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page Title</title>

    <style type="text/css" media="screen">

        body,
        html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        * {
            padding: 0;
            margin: 0;
        }

        iframe {
            width: 960px;
            height: 100%;
            overflow: hidden;
            border: none;
        }
    </style>

</head>
<body>

    <iframe src="http://google.com" scrolling="no"></iframe>

</body>
</html>

这里的关键是:

  • 将BODY和HTML元素设置为浏览器窗口的100%,这样当你将iFrame设为100%时,它就可以达到100%。
  • 将BODY和HTML元素设置为overflow:hidden以便不显示滚动条
  • 确保没有填充

希望有所帮助

答案 1 :(得分:2)

使用我的JQuery插件:

 $.fn.resizeiframe=function(){
    $(this).load(function() {
        $(this).height( $(this).contents().find("body").height() );
    });
    $(this).click(function() {
        $(this).height( $(this).contents().find("body").height() );
    });

}

然后,使用它如下:

$('iframe').resizeiframe();

唐'忘记调整iframe的属性如下:

<iframe
   src="islem.html"
   frameborder="0"
   width="100%"
   marginheight="0"
   marginwidth="0"
   scrolling="no"
></iframe>

答案 2 :(得分:1)

我正在寻找相同的效果,我找到了一种方法。如果您在指标部分中使用Chrome(或firebug)中的“检查元素”进行查看,请选择<html>。你应该看看html区域是否小于整个文档。如果你将html设置为高度:300%,它应该工作。以下是重要功能:

html {height:300%;
}
body {height:100%;
}
#frame {height:90.74074074074074%;}

***注意您可能编码的任何最大高度,它会将效果搞定。

在我的情况下,我不得不将框架高度与容器中的另一个元素分开,因此它可以完全拉伸而不会出现滚动条。因此,我必须使用萤火虫计算容器中剩余高度的百分比。

-------另一种方式,更容易:

尽量不为html文档指定任何高度,

html, body {}

然后只编码:

#some-div {height:100%;}
#iframe {height:300%;}

注意:div应该是你的主要部分。

这应该相对有效。 iframe确切地计算了300%的可见窗口高度。如果第二个文档(在iframe中)的html内容的高度小于浏览器高度的3倍,则可以正常工作。如果您不需要经常向该文档添加内容,这是一个永久的解决方案,您可以根据您的内容高度找到您自己的%。