最近公司做项目,我负责的模块中显示的列表信息太多(细数了下,共有25+列),刚开始不知道怎么弄滚动条,然后也没去网上搜,因此就把这25列数据调整列宽后凑合在一起了。由于公司屏幕分辨率很大,所以一屏也能显示出来,此后也就忘了滚动条的问题。但这样固定列宽的情况,在项目开发过程中难免会遇到数据量过长时造成排版变乱。由于不知道怎么用滚动条,所以一直就处于 调整列宽-排版乱-调整列宽-排版乱...的循环中,因此也浪费了很多时间。
正好今天周末,在家没事,就用自己的电脑运行项目,由于本本分辨率本来就小,因此当页面显示出来的时候,我直接“我嘞个擦~~!”了。被自己吓一跳:“这tm什么玩意!!这tm简直就是万花筒啊~~!!”,至于样式,自己脑补吧。唉,这样等到项目上线时肯定不行!改吧~~!!(进入正题.....)
刚开始真的无从下手,一次次调整列宽,一次次推翻自己,当时脑子都要炸了~~!到了最后也没有调整到自个心仪的标准,最后只能上论坛了--CSDN。结果大神一句话就把我折服了:
body {
width: 2000px;
}
就这么简单!直接固定好body的宽度就行,只要当前屏幕的分辨率显示宽度小于这个值得话,就会自动填充x轴滚动条。
随后又扫尾看了看滚动条的手动设置:如下
<style type="text/css">
<!--
body {
width:2000px;
overflow-x:auto;
overflow-y:auto;
}
-->
</style>
overflow-x:x轴,auto为显示,如果改为hidden的话就会隐藏滚动条,y轴的同理。
最后大功告成!心情顿时轻松了!!