让html元素随浏览器的大小自适应垂直居中
转自:http://www.cnblogs.com/linjiqin/archive/2011/06/15/2081362.html
表格可以实现td中的元素垂直居中显示,但是前提条件必须定义td的高才可行。
但是很多时候会用到元素跟随浏览器的大小垂直居中,如在制作展示官网、活动展示网等等的时候。
问题:
实现div垂直居中并在缩放浏览器尺寸的时候仍然居中。
解决方案:
1、浏览器可视区域的高度-元素的高度/2 = 元素距离浏览器可视区域顶部的距离。
(bodyHeight – divHeight)/2
2、浏览器可视区域如果小于元素的高度,即元素距离浏览器可视区域顶部的距离为零。
3、onresize()当浏览器的尺寸改变的时候触发事件。使用onresize()每次改变的时候,重新计算一下元素到顶部的距离。
实现代码:
function divMiddle(){ |
注意事项:
根据浏览器的不同onresize被触发的次数都不相同,因此处理的时候要格外小心。
让html元素随浏览器的大小自适应垂直居中的更多相关文章
- css系列(布局):实现一个元素在浏览器中水平、垂直居中的几个方案
在开发中偶遇需要一个元素垂直居中的需求,之前都是水平居中,垂直居中使用的比较少,经过一通研究,选择了几种相对比较实用的方案分享,抛砖引玉,如有遗漏不足,还望不吝指正. 方案一(IE7下该方案无法实现垂 ...
- JavaScript获取DOM元素位置和尺寸大小
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...
- 获取DOM元素位置和尺寸大小
JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...
- CSS 屏幕大小自适应
要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则: ①被链接文档将显示在什么设备上. ②用于为不同的媒介类型规定不同的样式. 语法: @medi ...
- css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位
css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...
- 一文看懂js中元素的客户区大小(clientWidth,clientHeight)
元素的客户区 元素的客户区大小,指的是元素内容及其内边距所占据的空间大小. 相关属性如下: 1. clientWidth:元素内容区宽度+元素左右内边距 2. clientHeight:元素内容区高度 ...
- WebView加载HTML图片大小自适应与文章自动换行
http://www.brighttj.com/ios/ios-webview-load-html-image-adaptive.html 在很多App中都会使用到webview,尤其是在加载新闻内容 ...
- 获取元素在浏览器中的绝对位置(从jquery1.8中抠出来)
<style> html,body{margin:0;padding:0;} .d1{margin-left:40px;background:red;width:2000px;height ...
- js获取页面元素距离浏览器工作区顶端的距离
先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript) ...
随机推荐
- ES6的promise对象研究
ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...
- [Effective JavaScript 笔记]第5章:数组和字典--个人总结
前言 这节里其实一直都在讨论对象这个在js中的万能的数据结构.对象可以表式为多种的形式,表示为字典和数组之间的区别.更多的我觉得这章讨论多的是一些对应实现功能的相关操作,有可能出现的bug以及如何避免 ...
- Apache服务器常规操作
导读 Apache是世界上排名第一的Web服务器,50%以上的Web服务器都在使用Apache,它几乎可以在所有计算机平台上运行.下面就由我给大家说说Apache服务器的一些常规操作. Apache服 ...
- [BZOJ2683][BZOJ4066]简单题
[BZOJ2683][BZOJ4066]简单题 试题描述 你有一个N*N的棋盘,每个格子内有一个整数,初始时的时候全部为0,现在需要维护两种操作: 命令 参数限制 内容 1 x y A 1<=x ...
- GIT的标准文档 使用和服务介绍
http://www.kancloud.cn/kancloud/how-to-use-github/42192 1. 探索GitHub 熟悉Git的人几乎都知道并喜欢GitHub,反过来GitHub也 ...
- Android中获取IMSI和IMEI
TelephonyManager mTelephonyMgr = (TelephonyManager) getSystemService(Context.TELEPHONY_SERVICE); Str ...
- 【持续集成】使用Jenkins实现多平台并行集成
使用Jenkins实现多平台并行集成 二月 15, 2012 暂无评论 我们的后端C应用都是支持跨平台的,至少目前在Linux和Solaris上运行是没有问题的,这样一来我们在配置持续集成环境时就要考 ...
- Reverse Pairs
For an array A, if i < j, and A [i] > A [j], called (A [i], A [j]) is a reverse pair.return to ...
- 1.2 中国象棋将帅问题进一步讨论与扩展:如何用1个变量实现N重循环?[chinese chess]
[题目] 假设在中国象棋中只剩下将帅两个棋子,国人都知道基本规则:将帅不能出九宫格,只能上下左右移动,不能斜向移动,同时将帅不能照面.问在这样条件下,所有可能将帅位置.要求在代码中只能使用一个字节存储 ...
- codeforces B. New Year Present 解题报告
题目链接:http://codeforces.com/contest/379/problem/B 题目意思:给定一个有n个钱包的序列,其中第i个钱包需要投入ai个钱币,需要编写一个程序,使得在对第i个 ...