{{ title }}
{{ errorMessage }}


{{ errorMessage }}





{{ registerSuccessMessage }}

解决低分率下页面出现滚动条导致背景图片不能全屏问题 - 6/13更新

首先非常感谢这位小伙伴反馈的问题,因为我自己电脑的分辨率是1920*1080px,所以没有注意到这个问题,毕竟江湖上流传着这样一句话:“我电脑上看都没问题,你的电脑环境配置错了吧?”,开个玩笑
6235.png
因为页面顶部导航条已经占了70px,在1366*768px分辨率以下的显示器上,首页的内容无法全部装得下,所以会出现滚动条。默认主题下是没有任何问题的,但是更换了主题后,在滚动条下方的区域有个空白块,这样很不美观:
123.jpg
解决的方法有很多种,考虑到在低分率下的页面空间本身就不大,加上导航条和左边菜单,内容区域就显得非常小了。所以就决定在低分辨率显示器下,隐藏掉首页最下面的三个链接区块,只保留了6个链接区块54个链接可以使用。
1234.jpg
处理之后页面变得简洁多了,如果只是单纯调整内容的高度,保持9个区块81个链接的话,内容会变得很臃肿很窄,所以还是决定砍掉了3个区块。
为了图麻烦顺便练练JavaScript,没有使用CSS解决这个问题,而是用原生JS解决了这个问题,源码如下:
image.png
写的很渣请见谅,大佬看到有什么问题欢迎多多指教,请忽略闭包...没写完整!本来想用函数构造器创建对象,然后封装成组件,但是由于不是很熟练,就先完成页面效果,后面再优化代码

解决思路

  1. 无需判断浏览器窗口宽度(响应式布局,会自动调整)根据用户浏览器窗口高度对页面进行调整即可;

  2. 分辨率大于1366*768px的显示器,浏览器窗口不全屏时同样会出现以上问题,所以当浏览器窗口大小改变时同样需要作出相应的调整;

  3. 判断用户浏览器窗口高度,以845px为判断条件(768px+页面内容的间距),让浏览器窗口小于845px时,隐藏掉指定元素。

写的不好,欢迎指正

文章分类
热门文章
文章标签