有没有办法使用 iframe 防止双滚动条
Posted
技术标签:
【中文标题】有没有办法使用 iframe 防止双滚动条【英文标题】：Is there a way to prevent double scrolling bars using 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 将隐藏所有可滚动内容。 【参考方案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, bodyheight: 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>【讨论】：
不要忘记设置 iframedisplay:block 或设置非基线垂直对齐设置，否则这将不起作用。【参考方案3】：
尝试通过 jvascript 设置高度， 示例：
<iframe id="test" FRAMEBORDER=0
src="form.jsp"
style="width: 100%"
onload="this.height=document.body.scrollHeight">
</iframe>
【讨论】：
以上是关于有没有办法使用 iframe 防止双滚动条的主要内容，如果未能解决你的问题，请参考以下文章