全屏iframe，高度为100％

JavaScript CSS

西里神奇

2020-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高度？

第3765篇《全屏iframe，高度为100％》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答

樱飞云泡芙 2020.03.26

这对我来说非常有效（仅当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 2020.03.26

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

<!doctype html>

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

html, body { height: 100%; }

Tom凯 2020.03.26

创建全屏的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/ width的100%。

这里的例子

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>

Near西门 2020.03.26

以下经过测试的工作

<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>

null 2020.03.26

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

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

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

番长 2020.03.26

您可以使用框架集作为先前的答案状态，但是如果您坚持使用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滚动条！

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答