基于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 相关文章推荐
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
学习Node.js模块机制
Oct 17 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
vue之数据交互实例代码
Jun 20 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
js消除图片小游戏代码
Dec 11 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
JS字符串和数组如何实现相互转化
Jul 02 Javascript
js轮播图之旋转木马效果
Oct 13 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
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
DataReader和DataSet的异同
2014/12/31 面试题
资料员的岗位职责
2013/11/20 职场文书
计算机专业推荐信范文
2013/11/27 职场文书
化妆品促销方案
2014/02/24 职场文书
社区活动总结范文
2015/05/07 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
五年级语文教学反思
2016/03/03 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
教你怎么用Python实现多路径迷宫
2021/04/29 Python
Vue详细的入门笔记
2021/05/10 Vue.js
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis