首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-11-22 
Jquery实现正文部分根据浏览器大小自适应高度????我自认为这是个伟大的命题,同样这也是我们在前端开发过程

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

?

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

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


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


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


???思路:


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


???开发前奏


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

???实现过程

???????1、导入JQ库

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

???????2、头部写入resize()时间

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

???????3、核心方法ReloadingWindow()

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

???????4、初始化调用ReloadingWindow()

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

热点排行