html框架页面不允许滚动条,关于html:使用iframe时如何摆脱双滚动条?

我已经在网上看到了这个问题,所有建议的解决方案都不适用于我,所以我想我会来这里的。

我有一个包含iframe的页面。页面顶部是一个下拉菜单,页面其余部分是iframe。就像我确定其他所有人一样,该想法是使菜单保持静止并且菜单选择在iframe中运行应用程序。 iframe的内容应滚动,但整个页面不应滚动。

我尝试过将iframe width=height=100%放在单个表元素中,也使用width=height=100%,但是如果使窗口垂直方向太短,则会得到两个滚动条。

有什么建议么?

我想我没有很好地解释自己。我想将滚动条在iframe中保持为自动,但是我永远不需要整个页面的滚动条。

我需要适当地调整iframe的大小,以便它始终恰好占据页面的其余部分,因此浏览器不必制作滚动条,因为iframe永远不会超出查看区域的底部。

再次更新,这应该可以正常工作! ;-)

更新:

演示:http://jsbin.com/ewomi3/3/edit

的HTML

的CSS

* { margin:0 padding:0 }

body { margin:0; padding:0; text-align:center }

#hold_my_iframe { padding:0px; margin:0 auto; width:100%; height:100% }

注意:

我终于明白了你想要什么!使用table标记而不是div标记作为容器!观看演示并享受它!

我编辑了我的问题,我希望iframe滚动,而不是浏览器主页面。

我必须去学一些更多的CSS。 谢谢。

您是救生员:)(y)

将css溢出设置为隐藏在要摆脱滚动条的任何框架上...

overflow:hidden

我不只是希望滚动条消失,我希望滚动条消失,我编辑了问题以尝试使问题更加清楚。

我知道这有点老了,但是这是我为页面所做的:

我的页面只有一个iFrame,我希望它占据整个页面,所以我使用了

在添加了适当的填充/边距/边框删除之后,我遇到了您描述的双重滚动条问题。使用Chrome的检查功能,我发现页面主体比iframe长约5像素,因此我只修改了iframe代码:

margin-bottom:-5px;为我解决了这个问题。

body {margin:0; overflow: hidden;}

iframe {border: none;}

自动低质量过滤器标记了您的答案。 请添加更多信息。 您为什么建议此代码? 您做了什么更改。

对于仍然存在这个双重滚动条问题的任何人,您要做的就是用一个带有溢出元素的iframe包裹:隐藏,然后向html,body,iframe和包装器添加100%的高度。

http://jsfiddle.net/KZ5wz/(我不知道为什么结果无法在JsFiddle中正确显示,但在我的机器中却像魅力一样)

要求很明确:

iframe上方有一个菜单栏,因此iframe似乎无法完全向下滚动到框架页面的底部。

窗口滚动条必须是隐藏的,而不是iframe滚动条。

我的解决方案非常简单:

用overflow:hidden;隐藏窗口滚动条。

给iframe的高度不是通常的100%,而是100%减去菜单和/或iframe上方的标头的高度。我假设菜单/标题占据了总高度的20%,但是由于它通常具有固定的高度,因此在CSS3中最好将其计算为height: calc ( 100% - 120px );。 iframe周围的包装物可以是div或宽度为100%,高度为100%的桌子。

这是我的示例,其中iframe高度设置为窗口的80%:

样式:

body {

overflow: hidden;

}

#hold_my_iframe {

padding:0px; margin:0 auto; width: 100%; height: 100%; overflow:scroll;

}

的HTML:

width="100%" height="80%"

marginwidth="0" marginheight="0" frameborder="0">

去掉

身体{身高:100%; }

通过动态分配iframe的高度,我解决了双滚动条问题。

StackOverflow-动态更改iframe高度

看到这个问题仍然无法解决,我想我会掏出十美分。我想知道您是否使用过display:block / display:inline设置。没有完全理解您的问题,我不确定您将如何执行此操作,但是我认为您可能希望将iframe更改为显示inline。

好,这个问题很旧,但是我今天遇到了同样的问题,没有一个答案可以解决我的问题。仅在内部页面(相同域)中,两个垂直滚动条也出现了。一个用于浏览已加载页面(正确),另一个用于调整iframe区域的高度(!)...对于外部源页面,它似乎运行良好。

我解决此问题的方法是将一个类添加到要加载的内部页面主体中,如下所示

并将以下内容放入我的CSS文件中

body.internalPage{height: 99.5%;}

我希望它将来对某人有帮助。

如果您的整个页面内容都是iFrame,则只需添加样式即可:

body {

overflow: hidden;

}

否则,您可以将其放在桌子上或潜水,而只需定位该元素即可。上面有一个答案,其中有一个表的解决方案。

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值