The same code to implement the adaptive height of left and right divs based on jQuery-JS Tutorial-php.cn

The same code to implement the adaptive height of left and right divs based on jQuery

PHP中文网

Release： 2017-03-30 09:41:39

Original

1209 people have browsed it

When doing front-end design recently, I need to make the left and right p height adaptive. The clientHeight used to obtain the height in the jquery code introduces several different methods of obtaining it and their differences

Full code:

The code is as follows:

<!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>

Copy after login

The clientHeight used to obtain the height in the jquery code introduces several different methods of obtaining it and their differences.
The four browsers are IE (Internet Explorer), NS (Netscape), Opera, and FF (FireFox).
ClientHeight
Everyone has no objection to clientHeight. They all think it is the height of the visible area of the content. That is to say, the height of the area where the content can be seen in the page browser, usually from the last toolbar to This area above the status bar has nothing to do with the page content.
　offsetHeight
　IE and Opera believe that offsetHeight = clientHeight scroll bar border.
NS and FF believe that offsetHeight is the actual height of the web page content, which can be smaller than clientHeight.
ScrollHeight
IE and Opera believe that scrollHeight is the actual height of the web page content, which can be smaller than clientHeight.
NS and FF consider scrollHeight to be the height of the web page content, but the minimum value is clientHeight.
Simply put
clientHeight is the height of the area where the content is viewed through the browser.
NS and FF believe that offsetHeight and scrollHeight are both web content heights, but when the web content height is less than or equal to clientHeight, the value of scrollHeight is clientHeight, and offsetHeight can be less than clientHeight.
IE and Opera believe that offsetHeight is the visible area clientHeight scroll bar plus border. scrollHeight is the actual height of the web page content.
Similarly
The explanations of clientWidth, offsetWidth and scrollWidth are the same as above, just replace the height with the width.

Explanation
The above is based on DTD HTML 4.01 Transitional. If it is DTD XHTML 1.0 Transitional, the meaning will be different. In XHTML, these three values are the same value, and they all represent the actual height of the content. Most new versions of browsers support enabling different interpreters based on the DOCTYPE specified on the page. Download or browse test files.
Relational formula: scrollHeight = offsetHeight scrollTop