Jquery实现正文部分根据浏览器大小自适应高度
Jquery实现正文部分根据浏览器大小自适应高度
lgscofield 发表于2年前
Jquery实现正文部分根据浏览器大小自适应高度
  • 发表于 2年前
  • 阅读 9
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

 

Jquery实现正文部分根据浏览器大小自适应高度

   我自认为这是个伟大的命题,同样这也是我们在前端开发过程中所期待的一个用户体验项,请不要被我这拗口的标题所迷惑,以下的文字所能解决的问题其实我们都曾遇到过。
   假设有这样一个页面,我们不希望页面右侧出现滚动条,如果开发人员根据当前的屏幕分辨率去考虑的话,这个问题就极其简单了:


   正文部分容器高度=页面部分高度-头部高度-底部高度。


   然而,我现在可以很负责人的告诉你,你是一个不负责任的前端开发人员,鉴定完毕。
   因为你忽略了用户的感受。
   有的用户屏幕分辨率是1024*768的,而有的用户屏幕是1920*1080的,那么页面的兼容性在哪,用户体验在哪?扯淡完毕,进入正题!


   思路:


   首先,我承认这是个动态效果,打开页面时,计算当前浏览器的显示的页面大小,之后省略头部和底部的高度,初始化正文部分的高。如果用户放大或者缩小浏览器的显示区域时,触发resize()事件,重新计算!
   以上是整体思路,重点:初始化正文部分的高、重新计算;牵扯到的变量:浏览器可见部分的大小。


   开发前奏


       一个页面>一个头部>一个正文框架>一个底部

   实现过程

       1、导入JQ库

  

       2、头部写入resize()时间

       3、核心方法ReloadingWindow()

       4、初始化调用ReloadingWindow()

共有 人打赏支持
lgscofield
粉丝 20
博文 105
码字总数 62676
×
lgscofield
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: