文档章节

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

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

 

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

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


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


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


   思路:


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


   开发前奏


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

   实现过程

       1、导入JQ库

  

       2、头部写入resize()时间

       3、核心方法ReloadingWindow()

       4、初始化调用ReloadingWindow()

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

共有 人打赏支持
lgscofield

lgscofield

粉丝 21
博文 140
码字总数 63036
作品 0
南京
架构师
BOM中计算元素相关尺寸或偏移量的方式汇总

获取元素的尺寸或者获取元素的相对位置是前端开发中常见的操作,记得之前在其他博客中经常见到一张图来说明各属性所代表的意义,不过那图有点小,看着有点累。本文以列表和代码段的形式总结了...

leozdgao
2015/05/14
0
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
jquery的datagrid自适应浏览器的宽度

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

wenwen1
2014/03/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java JDK动态代理

本篇随笔是对java动态代理中的JDK代理方式的具体实现。 首先需要定义一个接口,为其定义了两个方法:   public interface UserService { public void add(); public void delete(); } 然后需...

编程SHA
26分钟前
2
0
轻松理解Dubbo分布式服务框架

Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案。简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需要用的...

别打我会飞
34分钟前
2
0
TypeScript基础入门之JSX(一)

转发 TypeScript基础入门之JSX(一) 介绍 JSX是一种可嵌入的类似XML的语法。 它旨在转换为有效的JavaScript,尽管该转换的语义是特定于实现的。 JSX在React框架中越来越受欢迎,但此后也看到了...

durban
58分钟前
1
0
JavaScript使用原型判断对象类型

1. constructor属性 在JavaScript创建对象(二)——构造函数模式中,我们说过可以使用对象的constructor属性判断对象的类型:p1.constructor === Person,可能当时就有细心的读者会想,我们...

Bob2100
今天
1
0
10-《深度拆解JVM》JVM是怎么实现invokedynamic的?(下)

一、问题引入 上回讲到,为了让所有的动物都能参加赛马,Java 7 引入了 invokedynamic 机制,允许调用任意类的“赛跑”方法。不过,我们并没有讲解 invokedynamic,而是深入地探讨了它所依赖...

飞鱼说编程
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部