高度为 100% 的全屏 iframe

javascript html css iframe html-frames

2022-08-29 23:59:56

是否所有浏览器都支持 iframe 高度 = 100%？

我使用文档类型作为：

<!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）中都受支持？

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

答案 1

您可以使用框架集作为前面的答案状态，但如果您坚持使用iFrames，以下2个示例应该有效：

<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的滚动条，父项被设置为隐藏滚动条，iFrame被设置为高达150%的宽度和高度，这迫使滚动条在页面之外，并且由于正文没有滚动条，因此人们可能不会期望iframe超出页面的边界。这隐藏了全宽iFrame的滚动条！overflow: hidden

答案 2

创建全屏的3种方法：`iframe`

方法 1 - 视口百分比长度

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

其中表示视区的高度，同样表示宽度。100vh100vw

此处的示例

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 - 固定定位

这种方法相当简单。只需设置元素的位置并添加一个 / of 。fixedheightwidth100%

此处的示例

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

<iframe></iframe>

方法 3

对于最后一种方法，只需将 // 元素的设置为。heightbodyhtmliframe100%

此处的示例

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>

高度为 100% 的全屏 iframe

创建全屏的3种方法：iframe

方法 1 - 视口百分比长度

方法2 - 固定定位

方法 3

创建全屏的3种方法：`iframe`