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

http://laobaisun.diandian.com/post/2012-06-14/40028314272

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

14th of June 2012

用户体验 Jquery IT 网络生活 前端开发



我自认为这是个伟大的命题，同样这也是我们在前端开发过程中所期待的一个用户体验项，请不要被我这拗口的标题所迷惑，以下的文字所能解决的问题其实我们都曾遇到过。

假设有这样一个页面，我们不希望页面右侧出现滚动条，如果开发人员根据当前的屏幕分辨率去考虑的话，这个问题就极其简单了：

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

然而，我现在可以很负责人的告诉你，你是一个不负责任的前端开发人员，鉴定完毕。

因为你忽略了用户的感受。

有的用户屏幕分辨率是1024*768的，而有的用户屏幕是1920*1080的，那么页面的兼容性在哪，用户体验在哪?扯淡完毕，进入正题！

思路：

首先，我承认这是个动态效果，打开页面时，计算当前浏览器的显示的页面大小，之后省略头部和底部的高度，初始化正文部分的高。如果用户放大或者缩小浏览器的显示区域时，触发resize()事件，重新计算！

以上是整体思路，重点：初始化正文部分的高、重新计算；牵扯到的变量：浏览器可见部分的大小。

开发前奏

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

实现过程

1、导入JQ库



2、头部写入resize()时间



3、核心方法ReloadingWindow()



4、初始化调用ReloadingWindow()