基于jQuery实现左右div自适应高度完全相同的代码


Posted in Javascript onAugust 09, 2012

在线演示:http://demo.3water.com/js/2012/jquery_demo/jquery_div_autoheihet.htm
完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery实现左右div自适应高度完全相同 - 三水点靠木</title> 
<meta name="Copyright" content="脚本分享网 https://3water.com/" /> 
<meta name="description" content="jQuery实现左右div自适应高度完全相同" /> 
<meta content="jQuery实现左右div自适应高度完全相同,JavaScript,分享,JavaScript代码" name="keywords" /> 
<style type="text/css"> 
<!-- 
body{FONT-SIZE: 14px;background-color:#fff} 
--> 
</style> 
<style type="text/css"> 
#left{background:#999999; float:left; width:100px;} 
#right{background:#0066FF; color:#fff; width:300px; float:left;} 
.clear{clear:both;} 
</style> 
</head> 
<body> 
<h3>右边高度高度左边</h3> 
<div id="left"> 
<div style="padding:10px"> 
<a href="https://3water.com">三水点靠木</a> 
</div> 
</div> 
<div id="right"> 
<div style="padding:10px"> 
是一个以网站设计相关的资源分享网站,网站只提供最优秀的<a href="https://3water.com/">JS代码</a>,jQuery插件,网页特效,HTML5代码,矢量图,设计图标,网站模板等,而且这一切都是免费的 
</div> 
</div> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
<script type="text/javascript"> 
function $(id){ 
return document.getElementById(id) 
} 
function getHeight() { 
if ($("left").offsetHeight>=$("right").offsetHeight){ 
$("right").style.height=$("left").offsetHeight + "px"; 
} 
else{ 
$("left").style.height=$("right").offsetHeight + "px"; 
} 
} 
window.onload = function() { 
getHeight(); 
} </script> 
<div style="clear:both"></div> 
</body> 
</html>

这其中的jquery代码中的获得高度用的clientHeight,介绍一下几种不同的获得方式以及他们的差别。

这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。

clientHeight

大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。

NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

scrollHeight

IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。

NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

简单地说

clientHeight 就是透过浏览器看内容的这个区域高度。

NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。

IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理

clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。

说明

以上基于 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional 则意义又会不同,在 XHTML 中这三个值都是同一个值,都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器。下载或浏览测试文件。

关系公式:scrollHeight = offsetHeight+ scrollTop

ps:介绍摘自百度百科

Javascript 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
js单例模式的两种方案
Oct 22 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 #Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 #Javascript
基于jQuery的简单九宫格实现代码
Aug 09 #Javascript
JavaScript基础知识之数据类型
Aug 06 #Javascript
jquery 插件学习(六)
Aug 06 #Javascript
jquery 插件学习(五)
Aug 06 #Javascript
jquery 插件学习(四)
Aug 06 #Javascript
You might like
php 求质素(素数) 的实现代码
2011/04/12 PHP
php的sso单点登录实现方法
2015/01/08 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
微信支付的开发流程详解
2016/09/13 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
python中metaclass原理与用法详解
2019/06/25 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
python 解决函数返回return的问题
2020/12/05 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
详解thinkphp的Auth类认证
2021/05/28 PHP
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android