overflow:auto

在制作页面，添加资料的时候，可能会遇到这种情况，客户提供的表格数据太宽，把页面撑开了，我也遇到这样的问题，当我尽量给表格减肥，发现还是不行的时候，偶忽然想到了overflow:auto，这个属性。

在这个大的数据表格外面套一个div，class是box，页面源码
<div class="box">
<table>
......
</table>
</div>

css这样写 .box{width:520px; overflow:auto;}

css定义了这个div的overflow“auto”的属性，还有就是要给这个div一个适合这个页面的宽度。

这样，当“box”里面的内容宽度大于css定义的宽度时，就会出现滚动条了。里面的内容可以是表格，也可以是图片等等

今天遇到一个比较特殊的情况：ie6下设置overflow:auto不起作用，在火狐下正常显示。ie下滚动条是出来了，但是内容却跑到下面去了，滚动条行同虚设。网上搜索了一下都说是设置高度和宽度就ok了，开始还以为是百分比高度引起的，但设置成绝对高度200px后还是不行。最后通过经验判断出原来是overflow的那个div没有position定位，给加了个定位和top,left属性后一切都正常了！汗，实际开发中遇到的问题远远比预料的多啊，这或许是为什么软件项目开发总是延迟，尽管开发人员加班加点成了家常便饭还是不可避免的。

overflow:auto相关推荐

IE6Bug，外层container设置了overflow:auto，但是内层嵌套元素有position:relative的时候，显示错误。...
HTMl代码: <div id="container"><div id="a"></div><div id=" ...
解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题...
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题在IE6,IE7下,子元素使用position:relative ...
父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小
发现父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小 ...
ionic overflow:auto失效
事情的起因是同事上传一个很宽的table文件,因为手机屏幕宽度有限,因此要求用户可以水平滚动页面,这样table的内容通过滚动就可以实现啦. 当时感觉很简单给table外面的容器加个overfl ...
Vue 设置overflow: auto 后监听滚动距离
overflow: auto 后监听滚动距离 <div class="page-body-inner" @scroll.passive="getScroll($ev ...
iOS 移动端overflow:auto 滚动不平滑及bug处理
在苹果手机上使用overflow:auto 默认滚动不平滑. 解决方案是使用-webkit-overflow-scrolling:touch bug: 会导致使用固定定位的元素,随着页面一起滚动. f ...
IE6 CSS bug: position:relative元素被overflow:auto/scroll元素包含
BUG描述: 页面中某DIV使用了position:relative,结合top=-25px等元素定位.在FF和IE7下表现正常,但是在IE6中该DIV会随鼠标滚动而滚动. 分析: 这是IE6一个已知 ...
mobile safari下 overflow:auto无效的解决方法
mobile safari下 overflow:auto无效的解决方法参考文章: (1)mobile safari下 overflow:auto无效的解决方法 (2)https://www.cnbl ...
overflow:auto自动滚动到底部（vue）
在做消息的项目,当有新消息的时候让新消息出现在最底部,此时的box用的是overflow:auto 注:vue项目需要注意在dom结构渲染完再进行操作 <ul class="box&q ...

overflow:auto

overflow:auto相关推荐

最新文章

热门文章