问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

高度为 100% 的全屏 iframe

社区维基
1
新手上路，请多包涵

所有浏览器都支持 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 高度？

原文由 copenndthagen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlcssiframehtml-frames
阅读 1.5k
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

原文由 Axe 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

创建全屏的 3 种方法 iframe ：

在 支持的浏览器 中，您可以使用 视口百分比长度，例如 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 - 固定定位

这种方法相当简单。 Just set the positioning of the fixed element and add a height / width of 100% .

这里的例子

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

   <iframe></iframe>
  • ### 方法三

For this last method, just set the height of the body / html / iframe elements to 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>

原文由 Josh Crozier 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题