基于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获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
JS 控件事件小结
Oct 31 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 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
世界收音机发展史
2021/03/01 无线电
PHP安全上传图片的方法
2015/03/21 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
js几个验证函数代码
2010/03/25 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
用vue设计一个日历表
2020/12/03 Vue.js
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
Python中操作符重载用法分析
2016/04/29 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
人事档案接收函
2014/01/12 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
团队口号大全
2014/06/06 职场文书
企业宗旨标语
2014/06/10 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
2016大学军训心得体会
2016/01/11 职场文书