`

如何隐藏以框架页面尺寸溢出出现的横向滚动条

阅读更多

在我们设计网页时经常会用到框架,在使用框架(无论是frameset、frame、iframe)嵌套网页的时 候,如果子网页的高度超过了预先设定的高度,会出现滚动条,也就是尺寸溢出,一般来说如果高度超了就出现垂直滚动条,宽度超了就出现水平滚动条,但是在 IE6中,只要尺寸大于等于预定高度,就会两个滚动条一起出现,这好象是一个bug。

解决方法:
在子网页设置css如下:

html {
overflow-y:auto!important;
*overflow-y:scroll;
}

这段最重要的一点是设置overflow-y为scroll,这样强制出现垂直滚动条的话,水平滚动条就不会显示出 来了,但如果宽度超出过多,水平滚动条还是会超出,这时可以考虑设置:overflow-x:hidden;,但相应的,这样用户就无法滚动子页面了。

之所以要加overflow-y:auto!important;,是因为IE7中已没有这个bug,并且 firefox也能认到overflow-y这个据说是IE的私有属性……,所以我们还要把overflow设回来。

主页面加IFRAME SCROLLING="YES"
子页面
程序代码
'让竖条消失:

<BODY STYLE='OVERFLOW:SCROLL;OVERFLOW-Y:HIDDEN'>
</BODY>

'让横条消失:

<BODY STYLE='OVERFLOW:SCROLL;OVERFLOW-X:HIDDEN'>
</BODY>

'还要去掉
'子页面里的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
'两个都去掉
<IFRAME scrolling="no">

---------------------------------------------------------------------

使用dw 生成的页面会有下面两句:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="
http://www.w3.org/1999/xhtml ">

如果带有这两句的页面被嵌入到iframe里面,那么overflow-x : hidden ;就不起作用。

转贴 ----------------------------------------------------------------------------------

框架代码:
<frameset rows="100,*" cols="*" frameborder="no" border="0" framespacing="0">
  <frame src="index.php?cp=top" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />
  <frameset cols="200,*" frameborder="no" border="0" framespacing="0">
    <frame src="index.php?cp=left" name="leftFrame" scrolling="yes" noresize="noresize" id="leftFrame" />
    <frame src="main.php" name="mainFrame" id="mainFrame" />
  </frameset>
</frameset>
使 用上面的框架时当我们的main.php内容超多屏幕时,横向和竖向都会出现滚动条,对于横向我们的main.php的宽度无论有没有超过 mainFrame的宽度都会出现横向滚动条,为了取消横向滚动条我们采用了以下方法:
前提条件是:mainFrame的页面没有声明DTD,即
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


body {
overflow: scroll;
overflow-x: hidden;
overflow-x: auto !important;
}

如果声明了DTD,可以把body换成html解决。

转贴 ---------------------------------------------------------------

IE下浏览正常的,在firefox下就出现问题了,出现了横向滚动条,不知道该这两者之间有什么区别?

是不是长串的英文连在一起了,需要加一些空格或者换行,ff不会为这样的东西自动换行的。

分享到:
评论

相关推荐

    限制div高度当内容多了溢出时显示滚动条

    主要介绍了如何限制div高度当内容多了溢出时显示滚动条,这个方法很实用,特别是在需要显示更多内容的时候,好了看看下面的示例

    使用CSS隐藏元素滚动条的示例代码

    首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可。想要完全隐藏滚动条只需设置overflow:hidden即可,但是这样一来将导致元素内容不可滚动。时至今日,还没有任何一条CSS规则...

    html滚动条 textarea属性设置

    1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。...

    溢出滚动「Overflow scroll」-crx插件

    打开所有溢出:隐藏溢出:滚动 通过此chrome扩展程序,可以滚动显示当前页面(标签)上所有可能禁用滚动的元素。 支持语言:English

    文字溢出滚动展示

    文字溢出滚动展示,循环展示和一个展示的demo.

    判断滚动条到底部的JS代码

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。 scrollTop为滚动条在Y轴上的滚动距离。 clientHeight为内容可视区域的高度。 scrollHeight为内容可视区域的高度加上溢出...

    自定义横向标签列表并作溢出处理

    http://blog.csdn.net/u010544275 博客的代码资源下载

    tailwind-scrollbar:Tailwind CSS的滚动条插件

    使用典型CSS技术迫使内容溢出并触发滚动条。 对于每个要设置样式的元素,请添加.scrollbar或.scrollbar-thin类。 然后,您可以添加任何所需的scrollbar-track-{color} , scrollbar-thumb-{color}或hover:

    html,小程序scroll-view去除滚动条

    子盒子添加内容溢出滚动条显示属性 overflow-y:scroll 并设置好宽高 可实现隐藏滚动条也可是滚轮触发滑动,使用此方法 无法监听window的滚动条事件。 代码示例: .box{ width:300px; height: 400px; overflow: ...

    CSS3自定义滚动条样式的示例代码

    滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦。但是,也只能玩玩,因为只针对webkit内核的浏览器啊啊啊啊啊! ...

    jQuery实现判断滚动条到底部

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。 scrollTop为滚动条在Y轴上的滚动距离。 clientHeight为内容可视区域的高度。 scrollHeight为内容可视区域的高度加上溢出...

    内存溢出配置,内存溢出配置

    内存溢出配置,内存溢出配置内存溢出配置内存溢出配置

    poi读取excel 内存出现溢出问题

    针对读取、生成excel内存溢出问题,包括工具类和具体的实现

    详解CSS3:overflow属性

    overflow:auto 属性如果超出就出现滚动条,没有超出则不出现滚动条这样就可以出现滚动条, 滚动条也可以单独设置,例如overflow-x:hidden;overflow-y:auto;这样就只能看见垂直方向的滚动条了。如果单独定义x轴...

    phpExcel导出大量数据出现内存溢出错误的解决方法

    我们经常会使用phpExcel导入或导入xls文件,但是如果一次导出数据比较大就会出现内存溢出错误,下面我来总结解决办法

    Styled-Scroll:具有本机性能的自定义滚动条

    样式化滚动为溢出的元素提供了一个垂直叠加的滚动条,非常适合为所有浏览器创建一个时尚的滚动条,或者只是减少滚动条所占用的空间。 与其他滚动库不同,它不会覆盖默认滚动行为-它仅隐藏默认滚动条并放置其自己的...

    css overflow溢出隐藏(文字溢出时的自动隐藏处理)

    overflow 属性说明: ...在需要时剪切内容并添加滚动条 hidden:不显示超过对象尺寸的内容。scroll:总是显示滚动条。 使用说明及要点: ◎ 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。◎ 设置

    内存泄漏与内存溢出

    软件开发 数据库 内存泄露 内存溢出

    vue2滚动条加载更多数据实现代码

    解析:判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。scrollTop为滚动条在Y轴上的滚动距离。clientHeight为内容可视区域的高度。scrollHeight为内容可视区域的高度加上溢出...

Global site tag (gtag.js) - Google Analytics