在制作页面,添加资料的时候,可能会遇到这种情况,客户提供的表格数据太宽,把页面撑开了,我也遇到这样的问题,当我尽量给表格减肥,发现还是不行的时候,偶忽然想到了overflow:auto,这个属性。
在这个大的数据表格外面套一个div,class是box,页面源码
代码如下 | 复制代码 |
|
这样写
代码如下 | 复制代码 |
.box{width:520px; overflow:auto;} |
css定义了这个div的overflow“auto”的属性,还有就是要给这个div一个适合这个页面的宽度。
这样,当“box”里面的内容宽度大于css定义的宽度时,就会出现滚动条了。里面的内容可以是表格,也可以是图片等等。
在上上面overflow:auto的问题中,为了不让内容撑开,我用了
代码如下 | 复制代码 |
.box{width:520px; overflow:auto;} |
但是这样会出现一个问题,就是横向和竖直滚动条都会出现,因为如果只定义了overflow,竖直滚动条会因为横向滚动条占用的空间而一直出现,后来为了隐藏竖直的滚动条,我这样写
代码如下 | 复制代码 |
.box{width:520px; overflow:auto;overfolw-y:hidden;} |
隐藏了竖直滚动条,问题虽然解决了,但是换个角度去想,为什么是让它出现了再隐藏,而不是不让它出现。查过了苏沈小雨-样式表中文手册以后发现只要定义overfolw-x的属性就可以了。
代码如下 | 复制代码 |
.box{width:520px; overfolw-x:auto;} |
如果不超过所定宽度,不显示滚动条,超过了宽度只显示横向滚动条,因为没有对竖直滚动overfolw-y定义,所以竖直滚动条也没有出现。
语法:
overflow-x: visible | auto | hidden | scroll
参数:
visible: 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的宽度。
auto: 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden: 不显示超过对象宽度的内容
scroll: 总是显示横向滚动条
overfolw-y与上面overflow-x相似,想要固定垂直高度,出现垂直滚动条的话,只要定义高度和overfolw-y的属性就可以了。
恋爱进行时九游版
恋爱进行时九游版是一款以模拟恋爱玩法为核心的角色扮演手游,精
皇室对决fr(Null’s Royale)
皇室对决fr,即皇室战争的私服变态版本,在该版本中玩家能够拥
养了个猫联机版游戏
养了个猫小游戏一个猫咪主题的模拟经营类型的手游,在游戏中我那
模拟山羊收获日小米版
模拟山羊收获日小米版是一个极其魔性的手机游戏,在游戏中玩家将
女配逆袭之素衣
女配逆袭之素衣是一款恋爱养成冒险的一款游戏,可以角色扮演,在