如何仅使用 html 内联样式在 div 内使 iframe 高度为 100%答案

【问题标题】：How to make the iframe height 100% inside div using only html inline style如何仅使用 html 内联样式在 div 内使 iframe 高度为 100%
【发布时间】：2020-01-19 18:42:34
【问题描述】：

使用下面的当前代码，它给了我一个滚动条，但相反，我希望显示完整的网页。如果我将高度从 100% 更改为 1150 像素，它似乎可以工作，但我希望它是动态的，因此，我想让它成为 100%。宽度似乎在 100% 时可以正常工作，只是高度不行。

<div style="overflow:auto;-webkit-overflow-scrolling:touch; border:1px solid black">
<iframe src="http://help.websiteos.com/websiteos/example_of_a_simple_html_page.htm" 
style="width:100%;height:100%"></iframe>
</div>

【问题讨论】：

@DontVoteMeDown 我认为他的意思只是内联样式
使用下面的当前代码，它给了我一个滚动条，但我希望显示整个网页。 如果整个页面大于 viewport 怎么办?必须引入滚动条以使用户能够访问页面的其余部分，您不觉得吗？
整页不大于视口，因为我可以使它与 1150px 一起工作。
好吧，只有你的视口，你不能假设每个人的尺寸都和你一样，因为事实并非如此，如果你想知道我什么时候尝试height:1150px，我仍然会得到滚动条

标签： html css

【解决方案1】：

<iframe> 初始样式是带边框的。将border 设置为0，就是这样。示例：

<div style="overflow:auto;-webkit-overflow-scrolling:touch; border:1px solid black;">
  <iframe src="http://help.websiteos.com/websiteos/example_of_a_simple_html_page.htm" style="width:100%;height:100%; border: 0;"></iframe>
</div>

编辑

如果你想隐藏滚动，你还需要设置<body> 标签的样式（设置margin: 0; 并使用overflow:hidden）。现在你根本不需要包装 div：

<body style="margin:0; overflow: hidden">
  <iframe src="URL" style="width: 100vw; height: 100vh; border: 0;"></iframe>

【讨论】：

它仍然给了我滚动条。我希望它完全显示而无需向上/向下滚动。
你的意思是iframe上的内卷轴吗？您可以添加溢出：隐藏到它，但请注意，您将无法滚动内容。
相关：stackoverflow.com/questions/7398142/…
这不是我想要的。是的，我确实想隐藏它，但同时，整个页面应该显示而无需滚动。
我用不带滚动选项的全屏 iframe 编辑答案。

【解决方案2】：

如果您的目标是支持 vh 测量的较新浏览器，则使用 100vh 作为高度。

<iframe style="height:100vh;width:100%" />

【讨论】：

这不会解决它，现在你需要省略div的边框。
它仍然给了我滚动条。我希望它完全显示而无需向上/向下滚动。
example.com" style="height:100vh;width:100%;border:0;"> 会起作用，但内部页面 css 会接管响应式，现在如果声明了高度和，那么它可以被缩放。这可以用 jquery 或 javascript 来完成。可以使用引导响应方法，即在其库中使用 jquery 脚本。

【解决方案3】：

使用内联样式是一种不好的做法，我建议使用 css 类来应用这些样式

.iframeStyle{
  width:100%;
  height:100%; 
  border: 0;
}

.divIFrame{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid black;
}

<div class="divIFrame">
  <iframe src="http://help.websiteos.com/websiteos/example_of_a_simple_html_page.htm" class="iframeStyle"></iframe>
</div>

【讨论】：

同意，但 OP 确实要求内联样式。无论如何，这与我建议的解决方案相同 - 不是吗？ (:
它仍然给了我滚动条。我希望它完全显示而无需向上/向下滚动。