欢迎来到HELLO素材网! 南京网站制作选择顺炫科技
丰富的DIV CSS模版、JS,jQuery特效免费提供下载
当前位置:主页 > 建站教程 > DIVCSS教程 >

隐藏横向滚动条或纵向滚动条的解决方案

发表于2017-11-24 13:58| 次阅读| 来源网络整理| 作者session

摘要:在WEB实际开发过程中,特别是在iframe引用其它网页时,可能大家遇到过这样的问题,当您的页面在框架中的时候,即

在WEB实际开发过程中,特别是在iframe引用其它网页时,可能大家遇到过这样的问题,当您的页面在框架中的时候,即使您的所有的控件的宽度都没有超过屏幕宽度(一般设置为100%),但横向滚动条依然出现。即使您设置了scrolling=no 也不起作用。

一般情况下,网页都有<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">这个语句,如果网页显示不需要这个语名的,删掉上面的语句,横向滚动条就会没了,此效果在IE浏览器下测试成功,FF浏览器下失败。

在我们需要上面的语句时,我知道的就有五种方法:

 1、设置iframe的属性 scrolling="no"。(此方法把横向滚动条和纵向滚动条都隐藏了,不推荐)

 2、在被包含页的body标签加 scroll="no"。(和上面一样,都是隐藏横向滚动条和纵向滚动条)

 3、被包含页body应用overflow:hidden。当我们需要隐藏横向滚动条时,改成overflow-x:hidden,如:<body>;需要隐藏纵向滚动条时,改成overflow-y:hidden,如:<body>

 4、设置iframe的属性 scrolling="yes"。(设成yes时,IE则会一直出竖直滚动条,而不随便出水平条,推荐)

如果上面的都没有解决问题,那在第五种方法下加上:word-break:break-all;如:

隐藏横向滚动条<body>

隐藏纵向滚动条<body>