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

Question

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

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

如何使用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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Jes*_*nch 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>

Run Code Online (Sandbox Code Playgroud)

这里的关键是：

将BODY和HTML元素设置为浏览器窗口的100％，因此，当将iFrame设置为100％时，它的大小应为100％。
将BODY和HTML元素设置为overflow：hidden，以便不显示滚动条
确保没有填充

希望能有所帮助

我尝试过，但不起作用，`iframe height` =`浏览器高度`，所以scroll-y没用:(我认为CSS已经结束工作了... (5认同)

归档时间：	15 年前
查看次数：	50758 次
最近记录：	9 年，3 月前