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

 

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

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

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

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

   思路：

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

   开发前奏

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

   实现过程

       1、导入JQ库

  

       2、头部写入resize()时间

       3、核心方法ReloadingWindow()

       4、初始化调用ReloadingWindow()