gpt4 book ai didi

javascript - 高度为 100% 的全屏 iframe

转载 作者:IT老高 更新时间:2023-10-28 11:04:19 24 4
gpt4 key购买 nike

所有浏览器都支持 iframe height=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)都支持这个吗?

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

最佳答案

您可以按照前面的回答状态使用框架集,但如果您坚持使用 iFrame,以下 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 的滚动条,使父级 overflow: hidden 隐藏滚动条,并使 iFrame 的宽度和高度达到 150%,从而迫使滚动条在外面页面并且由于正文没有滚动条,因此人们可能不会期望 iframe 超出页面的边界。这会隐藏 iFrame 的滚动条全宽!

关于javascript - 高度为 100% 的全屏 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5867985/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com