`
843977358
  • 浏览: 241595 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于页面滚动条的设置

    博客分类:
  • html
阅读更多

       最近公司做项目,我负责的模块中显示的列表信息太多(细数了下,共有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轴的同理。

   最后大功告成!心情顿时轻松了!!

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics