基于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版代码高亮
Jun 26 Javascript
javascript 常用代码技巧大收集
Feb 25 Javascript
javascript 必知必会之closure
Sep 21 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 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获取指定月份第一天和最后一天的方法
2015/07/18 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
python如何实现反向迭代
2018/03/20 Python
python实现汽车管理系统
2018/11/30 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
python读取与处理netcdf数据方式
2020/02/14 Python
荷兰电脑专场:Paradigit
2018/05/05 全球购物
餐饮业创业计划书范文
2014/01/06 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
珍爱生命主题班会
2015/08/13 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书