文档章节

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

lgscofield
 lgscofield
发布于 2015/06/26 13:59
字数 453
阅读 10
收藏 1

 

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

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


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


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


   思路:


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


   开发前奏


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

   实现过程

       1、导入JQ库

  

       2、头部写入resize()时间

       3、核心方法ReloadingWindow()

       4、初始化调用ReloadingWindow()

本文转载自:http://lgscofield.iteye.com/blog/1660759

共有 人打赏支持
lgscofield

lgscofield

粉丝 20
博文 140
码字总数 63036
作品 0
南京
架构师
非常实用的12 个 jQuery 代码片段

jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助。 1. 导航菜单背景切换效果 在项目...

_小狼狗
2015/11/09
0
0
CSS制作水平垂直居中对齐各种方法总结

标签: 杂谈 分类: 网页前端 方法一: 这种方法用来实现单行垂直居中是相当的简单的,你只要保证元素内容是单行,并且其高度是固定不变的,你只要将其“line-height”设置成和“height”值一...

未央花开
2014/04/01
0
0
jQuery中的宽度和高度计算

DOM中宽度高度: window的宽度高度:代表着浏览器的有效可见区域的宽度高度,即浏览器工具栏和任务栏之间的区域,它会随着最大化最小化或改变窗口尺寸的变化而变化,它代表着“视界”。 docu...

i33
2013/03/25
0
0
JS,Jquery获取各种屏幕的宽度和高度

Javascript: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: do...

pureboys
2013/06/06
0
1
jquery的datagrid自适应浏览器的宽度

这个问题困扰我很久了,我试过好多方法,例如设置datagrid的width为auto,还有设置datagrid的fit为true,但是这种方法不行,然后我在网上发现有人写了一个扩展方法,链接为http://www.myexce...

wenwen1
2014/03/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

kernel version does not match DSO version

错误信息: kernel version 384.11 does not match DSO version 384.130.0 原因是: cuda driver版本太低,不匹配DSO 简单有效的修复方法,升级nvidia driver, 步骤如下: 1. google seach ...

刘小米
今天
0
0
maven坐标和依赖

一、maven坐标详解 <groupId>com.fgt.club</groupId><artifactId>club-common-service-facade</artifactId><version>3.0.0</version><packaging>jar</packaging> maven的坐标元素说......

老韭菜
今天
1
0
springmvc-servlet.xml配置表功能解释

问:<?xml version="1.0" encoding="UTF-8" ?> 答: xml version="1.0"表示是此xml文件的版本是1.0 encoding="UTF-8"表示此文件的编码方式是UTF-8 问:<!DOCTYPE beans PUBLIC "-//SPRING//......

隐士族隐逸
今天
1
0
基于TP5的微信的公众号获取登录用户信息

之前讲过微信的公众号自动登录的菜单配置,这次记录一下在TP5项目中获取自动登录的用户信息并存到数据库的操作 基本的流程为:微信设置自动登录的菜单—>访问的URL指定的函数里获取用户信息—...

月夜中徘徊
今天
0
0
youTrack

package jetbrains.teamsys.license.runtime; 计算lis package jetbrains.ring.license.reader; 验证lis 安装后先不要生成lis,要把相关文件进行替换 ring-license-checker-1.0.41.jar char......

max佩恩
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部