suchen

Heim  >  Artikel  >  Web-Frontend  >  基于jQuery实现左右div自适应高度完全相同的代码

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

PHP中文网
PHP中文网Original
2017-03-30 09:41:391209Durchsuche

最近做前端设计时需要使左右两个p高度自适应。这其中的jquery代码中的获得高度用的clientHeight，介绍一下几种不同的获得方式以及他们的差别

完整代码：

代码如下:

<!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实现左右p自适应高度完全相同 - 脚本之家</title> 
<meta name="Copyright" content="脚本分享网 http://www.jb51.net/" /> 
<meta name="description" content="jQuery实现左右p自适应高度完全相同" /> 
<meta content="jQuery实现左右p自适应高度完全相同,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> 
<p id="left"> 
<p style="padding:10px"> 
<a href="http://www.php.cn/xiazai/js">php中文网特效下载站</a> 
</p> 
</p> 
<p id="right"> 
<p style="padding:10px">
是一个以网站设计相关的资源分享网站，网站只提供最优秀的<a href="http://www.php.cn/xiazai/js">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> 
<p style="clear:both"></p> 
</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


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jquery 插件学习（一）_jqueryNächster Artikel：分享精心挑选的12款优秀jQuery Ajax分页插件和教程_jquery

In Verbindung stehende Artikel

Mehr sehen