前段时间做一个页面的时候，遇到一些样式上的问题：由于layout的关系，在我需要显示最外div横向滚动条和纵向滚动条时，遇到了一些阻碍，因此也借此机会，研究了一下div的overflow属性，下面给大家分享一下：
1.overflow属性多用于div，其作用是：规定当内容溢出元素框时发生的事情；
2.所有主流浏览器都支持 overflow 属性，因此可以放心使用；
3.overflow可分别设置x轴或者y轴（即overflow-x:，overflow-y:），也可以对两者同时进行设置（overflow:）
4.overflow有以下这些属性：
visible 默认值。内容不会被修剪，会呈现在div之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。（注：所有IE浏览器都不支持inherit属性）
普遍来说，auto属性比较常用，一般y轴都会生成滚动条，而x轴的滚动条并不多见。特别是使用了bootstrap等框架后，利用其分栏功能搭建的div，会有效利用浏览器的横向宽度（将100%的宽度等分成12格，如果一行排列的元素超过12格，则会自动换行），因此一般不会出现横向滚动条。
我上面说到遇到的具体问题是这样的：我的页面布局，是比较常见的，最外层是一个大div，当中的上部是设置菜单，左下是真正的菜单，右下是主体内容显示区域。我现在需要在右下的主体内容区域中做一个页面，这个页面会显示sql查询语句返回的内容，动态生成一个table，这个table的宽度可能会非常宽，因此我需要显示x轴滚动条。
如果单纯显示右下div的滚动条，那会有一个问题：如果页面高度很高（sql返回的结果数较多），则必须要将页面y轴滚动条拉动之最底端，才能看到x轴的滚动条，这显然是非常不方便的。
如果光设置最外层div的滚动条，则y轴会出现两个滚动条，这也是不能接受的。
最终的方案是这样的：
右下的div，overflow设置成visible，最外层的div，overflow设置成auto（当然，这只是针对我这个特殊的页面，因此直接在view里重写并覆盖html和body的overflow属性，其余页面不受影响）
大家可以根据自己的实际需要，试着调整一下overflow的属性，多试几次，自然会理解这几个属性的作用的区别了。
网友评论