全屏iframe,高度为100%

Near · 03月26日

所有浏览器均支持iframe height = 100%吗?

我使用doctype作为:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在我的iframe代码中,如果我说:

<iframe src="xyz.pdf" width="100%" height="100%" />

我的意思是说,它实际上会占用其余页面的高度吗(因为顶部还有另一个固定高度为50px的框架),所有主流浏览器(IE / Firefox / Safari)都支持吗?

关于滚动条,即使我说了scrolling="no",我也可以在Firefox中看到禁用的滚动条...如何完全隐藏滚动条并自动设置iframe高度?

回答(6)
时间
樱飞云泡芙
6 · 2020-03-26 16:24:28

这对我来说非常有效(仅当iframe内容来自同一域时):

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
伽罗JinJin
5 · 2020-03-26 16:24:28

1.将您的DOCTYPE更改为不太严格的名称。不要使用XHTML;真傻 只需使用HTML 5文档类型,您就可以做到:

<!doctype html>

2.您可能需要确保(取决于浏览器)iframe的父级的高度。和它的父母。和它的父母。等等:

html, body { height: 100%; }
阳光
4 · 2020-03-26 16:24:28

创建全屏的3种方法iframe


  • 方法1- 视口百分比长度

    受支持的浏览器中,您可以使用视口百分比长度,例如height: 100vh

    其中,100vh代表视口的高度,同样100vw代表宽度。

    这里的例子

    body {
        margin: 0;            /* Reset default margin */
    }
    iframe {
        display: block;       /* iframes are inline by default */
        background: #000;
        border: none;         /* Reset default border */
        height: 100vh;        /* Viewport-relative units */
        width: 100vw;
    }
    <iframe></iframe>


  • 方法2-固定定位

    这种方法非常简单。只需设置的定位fixed元素,并添加height/ width100%

    这里的例子

    iframe {
        position: fixed;
        background: #000;
        border: none;
        top: 0; right: 0;
        bottom: 0; left: 0;
        width: 100%;
        height: 100%;
    }
    <iframe></iframe>


  • 方法3

    对于这最后的方法,只设置height了的body/ html/ iframe元素100%

    这里的例子

    html, body {
        height: 100%;
        margin: 0;         /* Reset default margin on the body element */
    }
    iframe {
        display: block;       /* iframes are inline by default */
        background: #000;
        border: none;         /* Reset default border */
        width: 100%;
        height: 100%;
    }
    <iframe></iframe>

N
Near西门
3 · 2020-03-26 16:24:28

以下经过测试的工作

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
西
西里
2 · 2020-03-26 16:24:28

我遇到了同样的问题,当时我正在将iframe拉入div。尝试这个:

<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

高度设置为100vh,代表视口高度。此外,宽度可以设置为100vw,尽管如果源文件响应时您可能会遇到问题(您的帧会变得很宽)。

番长
1 · 2020-03-26 16:24:28

您可以使用框架集作为先前的答案状态,但是如果您坚持使用iFrame,则以下两个示例应该可以工作:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

替代:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

要隐藏具有2种替代方法的滚动,如上所示:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

用第二个例子破解:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

要隐藏iFrame的滚动条,请使父级overflow: hidden隐藏滚动条,并使iFrame的宽度和高度达到150%,这会将滚动条强制移出页面,并且由于主体没有滚动条人们可能不会期望iframe超出页面范围。这会隐藏全宽度的iFrame滚动条!

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序