基于jQuery實(shí)現(xiàn)左右div自適應(yīng)高度完全相同的代碼
更新時(shí)間:2012年08月09日 00:28:11 作者:
最近做前端設(shè)計(jì)時(shí)需要使左右兩個(gè)DIV高度自適應(yīng)。這其中的jquery代碼中的獲得高度用的clientHeight,介紹一下幾種不同的獲得方式以及他們的差別
在線演示:http://demo.jb51.net/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實(shí)現(xiàn)左右div自適應(yīng)高度完全相同 - 腳本之家</title>
<meta name="Copyright" content="腳本分享網(wǎng) http://www.dbjr.com.cn/" />
<meta name="description" content="jQuery實(shí)現(xiàn)左右div自適應(yīng)高度完全相同" />
<meta content="jQuery實(shí)現(xiàn)左右div自適應(yīng)高度完全相同,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="http://www.dbjr.com.cn">腳本之家</a>
</div>
</div>
<div id="right">
<div style="padding:10px">
是一個(gè)以網(wǎng)站設(shè)計(jì)相關(guān)的資源分享網(wǎng)站,網(wǎng)站只提供最優(yōu)秀的<a href="http://www.dbjr.com.cn/">JS代碼</a>,jQuery插件,網(wǎng)頁特效,HTML5代碼,矢量圖,設(shè)計(jì)圖標(biāo),網(wǎng)站模板等,而且這一切都是免費(fèi)的
</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
大家對(duì) clientHeight 都沒有什么異議,都認(rèn)為是內(nèi)容可視區(qū)域的高度,也就是說頁面瀏覽器中可以看到內(nèi)容的這個(gè)區(qū)域的高度,一般是最后一個(gè)工具條以下到狀態(tài)欄以上的這個(gè)區(qū)域,與頁面內(nèi)容無關(guān)。
offsetHeight
IE、Opera 認(rèn)為 offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。
NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁內(nèi)容實(shí)際高度,可以小于 clientHeight。
scrollHeight
IE、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容實(shí)際高度,可以小于 clientHeight。
NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容高度,不過最小值是 clientHeight。
簡單地說
clientHeight 就是透過瀏覽器看內(nèi)容的這個(gè)區(qū)域高度。
NS、FF 認(rèn)為 offsetHeight 和 scrollHeight 都是網(wǎng)頁內(nèi)容高度,只不過當(dāng)網(wǎng)頁內(nèi)容高度小于等于 clientHeight 時(shí),scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域 clientHeight 滾動(dòng)條加邊框。scrollHeight 則是網(wǎng)頁內(nèi)容實(shí)際高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同,只是把高度換成寬度即可。
說明
以上基于 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional 則意義又會(huì)不同,在 XHTML 中這三個(gè)值都是同一個(gè)值,都表示內(nèi)容的實(shí)際高度。新版本的瀏覽器大多支持根據(jù)頁面指定的 DOCTYPE 來啟用不同的解釋器。下載或?yàn)g覽測(cè)試文件。
關(guān)系公式:scrollHeight = offsetHeight+ scrollTop
ps:介紹摘自百度百科
完整代碼:
復(fù)制代碼 代碼如下:
<!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實(shí)現(xiàn)左右div自適應(yīng)高度完全相同 - 腳本之家</title>
<meta name="Copyright" content="腳本分享網(wǎng) http://www.dbjr.com.cn/" />
<meta name="description" content="jQuery實(shí)現(xiàn)左右div自適應(yīng)高度完全相同" />
<meta content="jQuery實(shí)現(xiàn)左右div自適應(yīng)高度完全相同,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="http://www.dbjr.com.cn">腳本之家</a>
</div>
</div>
<div id="right">
<div style="padding:10px">
是一個(gè)以網(wǎng)站設(shè)計(jì)相關(guān)的資源分享網(wǎng)站,網(wǎng)站只提供最優(yōu)秀的<a href="http://www.dbjr.com.cn/">JS代碼</a>,jQuery插件,網(wǎng)頁特效,HTML5代碼,矢量圖,設(shè)計(jì)圖標(biāo),網(wǎng)站模板等,而且這一切都是免費(fèi)的
</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
大家對(duì) clientHeight 都沒有什么異議,都認(rèn)為是內(nèi)容可視區(qū)域的高度,也就是說頁面瀏覽器中可以看到內(nèi)容的這個(gè)區(qū)域的高度,一般是最后一個(gè)工具條以下到狀態(tài)欄以上的這個(gè)區(qū)域,與頁面內(nèi)容無關(guān)。
offsetHeight
IE、Opera 認(rèn)為 offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。
NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁內(nèi)容實(shí)際高度,可以小于 clientHeight。
scrollHeight
IE、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容實(shí)際高度,可以小于 clientHeight。
NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容高度,不過最小值是 clientHeight。
簡單地說
clientHeight 就是透過瀏覽器看內(nèi)容的這個(gè)區(qū)域高度。
NS、FF 認(rèn)為 offsetHeight 和 scrollHeight 都是網(wǎng)頁內(nèi)容高度,只不過當(dāng)網(wǎng)頁內(nèi)容高度小于等于 clientHeight 時(shí),scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域 clientHeight 滾動(dòng)條加邊框。scrollHeight 則是網(wǎng)頁內(nèi)容實(shí)際高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同,只是把高度換成寬度即可。
說明
以上基于 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional 則意義又會(huì)不同,在 XHTML 中這三個(gè)值都是同一個(gè)值,都表示內(nèi)容的實(shí)際高度。新版本的瀏覽器大多支持根據(jù)頁面指定的 DOCTYPE 來啟用不同的解釋器。下載或?yàn)g覽測(cè)試文件。
關(guān)系公式:scrollHeight = offsetHeight+ scrollTop
ps:介紹摘自百度百科
您可能感興趣的文章:
- jquery實(shí)現(xiàn)動(dòng)態(tài)改變div寬度和高度
- jquery動(dòng)態(tài)改變div寬度和高度
- js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動(dòng)條高度實(shí)現(xiàn)代碼
- js和jquery如何獲取圖片真實(shí)的寬度和高度
- JQuery獲取當(dāng)前屏幕的高度寬度的實(shí)現(xiàn)代碼
- JS和jquery獲取各種屏幕的寬度和高度的代碼
- 使用jquery獲取網(wǎng)頁中圖片高度的兩種方法
- JQuery獲取各種寬度、高度(format函數(shù))實(shí)例
- JQuery獲取瀏覽器窗口內(nèi)容部分高度的代碼
- jQuery獲取頁面及個(gè)元素高度、寬度的總結(jié)——超實(shí)用
- jquery實(shí)現(xiàn)在頁面加載完畢后獲取圖片高度或?qū)挾?/a>
- jquery獲取文檔高度和窗口高度匯總
- jQuery實(shí)現(xiàn)獲取隱藏div高度的方法示例
相關(guān)文章
jQuery ajax 跨域插件jquery.xdomainrequest.min.js的使用方法
jQuery XDomainRequest 是一個(gè)利用 XDomainRequest 對(duì)象為 IE8、IE9 實(shí)現(xiàn)跨域資源共享(CORS - Cross Origin Resource Sharing)的 jQuery 插件2023-06-06一個(gè)jquery實(shí)現(xiàn)的不錯(cuò)的多行文字圖片滾動(dòng)效果
本節(jié)與大家分享的多行文字圖片滾動(dòng)效果,基于jquery實(shí)現(xiàn),比較實(shí)用,有喜歡的朋友可以收藏下2014-09-09jquery UI Datepicker時(shí)間控件沖突問題解決
這篇文章主要介紹了jquery UI Datepicker時(shí)間控件沖突問題的解決,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12jQuery實(shí)現(xiàn)手機(jī)號(hào)碼輸入提示功能實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)手機(jī)號(hào)碼輸入提示功能,實(shí)例分析了jQuery針對(duì)手機(jī)號(hào)碼的判斷與提示相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04jQuery自定義圖片縮放拖拽插件imageQ實(shí)現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了jQuery自定義圖片縮放拖拽插件imageQ實(shí)現(xiàn)方法,涉及jQuery擴(kuò)展操作及頁面元素操作技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05jquery ajax雙擊div可直接修改div中的內(nèi)容
這篇文章主要介紹了jquery ajax雙擊div直接修改div中內(nèi)容的相關(guān)方法,感興趣的小伙伴們可以參考一下2016-03-03