如何仅使用html内联样式将div中的iframe高度设为100％

Question

使用下面的当前代码，它为我提供了一个滚动条，但我希望显示整个网页。 如果我将高度从100％更改为1150px，这似乎可行，但是我希望它是动态的，因此希望将其设置为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>

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

Answer 2

使用内联样式是一种不好的做法，我建议使用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> 

Answer 3

如果您要定位支持vh测量的新型浏览器，请使用100vh作为高度。

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