有没有办法使用 iframe 防止双滚动条答案

【问题标题】：Is there a way to prevent double scrolling bars using iframe有没有办法使用 iframe 防止双滚动条
【发布时间】：2015-11-01 23:46:05
【问题描述】：

此问题似乎与HTML iframe - Double Scrolling Bars 类似，但未得到解答或重复。

我想知道如何去掉 iframe 的滚动条，并使用浏览器的滚动条上下导航页面？

<html>
    <body style="margin: 0; padding: 0; border: 0; outline: 0;">
        <div style="width:100%;height:50px; background-color:red;"></div>
        <iframe frameBorder="0" style="width:100%;height:100%;" src="http://www.mynewplace.com/apartments-for-rent/st-paul-mn"></iframe>
    </body>
</html>

【问题讨论】：

尝试为 iframe 制作 css('overflow','hidden')，希望能成功
@syms 将隐藏所有可滚动内容。

标签： javascript jquery html css iframe

【解决方案1】：

你可以试试scrolling="no" 换成iframe

iframe { overflow:hidden;}

HTML：

<iframe frameBorder="0" style="width:100%;height:100%;" scrolling="no" src="http://www.mynewplace.com/apartments-for-rent/st-paul-mn"> 
  </iframe>

【讨论】：

这个问题是我无法查看 iframe 标签的内容，除非我扩展父级的高度，这可能会有所不同。

【解决方案2】：

尝试将所有父元素的高度设置为 100%（因此 HTML 和 BODY 标签），然后将 iframe 的高度设置为 calc(100% - 50px)

html, body{height: 100%;}

<html>

<body style="margin: 0; padding: 0; border: 0; outline: 0;">
  <div style="width:100%;height:50px; background-color:red;"></div>
  <iframe frameBorder="0" style="width:100%;height:calc(100% - 50px);" src="http://www.mynewplace.com/apartments-for-rent/st-paul-mn">
  </iframe>
</body>

</html>

【讨论】：

不要忘记设置 iframe display:block 或设置非基线垂直对齐设置，否则这将不起作用。

【解决方案3】：

尝试通过 jvascript 设置高度，示例：

<iframe id="test" FRAMEBORDER=0
  src="form.jsp"
  style="width: 100%"
  onload="this.height=document.body.scrollHeight">
</iframe>

【讨论】：