基于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 相关文章推荐
javascript globalStorage类代码
Jun 04 Javascript
JavaScript 获取用户客户端操作系统版本
Aug 25 Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
分享精心挑选的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-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
php中require和require_once的区别说明
2014/02/27 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
vue-property-decorator用法详解
2019/12/12 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
python list中append()与extend()用法分享
2013/03/24 Python
Python实现线程池代码分享
2015/06/21 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
实例讲解python中的序列化知识点
2018/10/08 Python
Python如何用filter函数筛选数据
2020/03/05 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
css3 border-image使用说明
2010/06/23 HTML / CSS
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
C++的几个面试题附答案
2016/08/03 面试题
环境科学专业个人求职信
2013/12/15 职场文书
微信营销策划方案
2014/02/24 职场文书
新品发布会主持词
2014/04/02 职场文书
关于安全的标语
2014/06/10 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
对公司的意见和建议
2015/06/04 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
使用JS实现简易计算器
2021/06/14 Javascript
Python必备技巧之函数的使用详解
2022/04/04 Python