如何用jquery實(shí)現(xiàn)高度自適應(yīng)

大家在有時(shí)的網(wǎng)頁(yè)設(shè)計(jì)中，前端會(huì)出現(xiàn)這樣一個(gè)問(wèn)題，因?yàn)樽髠?cè)的側(cè)邊導(dǎo)航只有幾個(gè)鏈接，很短，而右邊的正文部分有可能會(huì)很長(zhǎng)，怎么才能讓左側(cè)的背景能一直隨著右側(cè)的內(nèi)容高度的增加而增加呢？當(dāng)然，這種解決方法有兩種，一種就是讓左側(cè)的導(dǎo)航漂浮，在右側(cè)下拉或者是窗口拉出了左側(cè)的高度時(shí)置頂，像糗事百科右側(cè)的廣告那樣，這種方法現(xiàn)在也很流行，不過(guò)，我們今天不講這種，講的是另一種方法，讓左右兩邊的div的高度能一致，隨時(shí)一致，如果內(nèi)容是固定的話，好做，左右固定高度，如果右側(cè)的內(nèi)容不固定呢？還是有辦法得！

創(chuàng)新互聯(lián)建站是一家以成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、品牌設(shè)計(jì)、軟件運(yùn)維、網(wǎng)站推廣、小程序App開發(fā)等移動(dòng)開發(fā)為一體互聯(lián)網(wǎng)公司。已累計(jì)為成都水泥攪拌車等眾行業(yè)中小客戶提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開發(fā)服務(wù)。

這種問(wèn)題大多都是軟件系統(tǒng)或者是一些后臺(tái)中常用的，方法很簡(jiǎn)單，利用jquery獲取右側(cè)的高度，使得左側(cè)和右側(cè)的高度保持一致就OK啦！廢話不多，上代碼：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

""

htmlxmlns=""

head

metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/

titlejQuery實(shí)現(xiàn)左右div自適應(yīng)高度完全相同/title

styletype="text/css"

!--

body{FONT-SIZE: 14px;background-color:#fff}

--

/style

styletype="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

divid="left"

divstyle="padding:10px"

美浩工作室br/

美浩工作室br/

美浩工作室br/

美浩工作室br/

美浩工作室br/

/div

/div

divid="right"

divstyle="padding:10px"

網(wǎng)站建設(shè)工作室br/

網(wǎng)站建設(shè)工作室br/

網(wǎng)站建設(shè)工作室br/

網(wǎng)站建設(shè)工作室br/

網(wǎng)站建設(shè)工作室br/

網(wǎng)站建設(shè)工作室br/

網(wǎng)站建設(shè)工作室br/

網(wǎng)站建設(shè)工作室br/

網(wǎng)站建設(shè)工作室br/

網(wǎng)站建設(shè)工作室br/

網(wǎng)站建設(shè)工作室br/

網(wǎng)站建設(shè)工作室br/

網(wǎng)站建設(shè)工作室br/

網(wǎng)站建設(shè)工作室br/

br/

br/

br/

br/

br/

br/

br/

br/

br/

br/

br/

br/

br/

畫法幾何大家看法

/div

/div

scripttype="text/javascript"src=""/script

scripttype="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

divstyle="clear:both"/div

/body

/html

這其中的jquery代碼中的獲得高度用的clientHeight，介紹一下幾種不同的獲得方式以及他們的差別。

這四種瀏覽器分別為IE（Internet

Explorer）、NS（Netscape）、Opera、FF（FireFox）。

clientHeight

大家對(duì) clientHeight

都沒(méi)有什么異議，都認(rèn)為是內(nèi)容可視區(qū)域的高度，也就是說(shuō)頁(yè)面瀏覽器中可以看到內(nèi)容的這個(gè)區(qū)域的高度，一般是最后一個(gè)工具條以下到狀態(tài)欄以上的這個(gè)區(qū)域，與頁(yè)面內(nèi)容無(wú)關(guān)。

offsetHeight

IE、Opera

認(rèn)為 offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。

NS、FF 認(rèn)為 offsetHeight

是網(wǎng)頁(yè)內(nèi)容實(shí)際高度，可以小于 clientHeight。

scrollHeight

IE、Opera 認(rèn)為 scrollHeight

是網(wǎng)頁(yè)內(nèi)容實(shí)際高度，可以小于 clientHeight。

NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁(yè)內(nèi)容高度，不過(guò)最小值是

clientHeight。

簡(jiǎn)單地說(shuō)

clientHeight 就是透過(guò)瀏覽器看內(nèi)容的這個(gè)區(qū)域高度。

NS、FF 認(rèn)為

offsetHeight 和 scrollHeight 都是網(wǎng)頁(yè)內(nèi)容高度，只不過(guò)當(dāng)網(wǎng)頁(yè)內(nèi)容高度小于等于 clientHeight 時(shí)，scrollHeight

的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。

IE、Opera 認(rèn)為 offsetHeight

是可視區(qū)域 clientHeight 滾動(dòng)條加邊框。scrollHeight

則是網(wǎng)頁(yè)內(nèi)容實(shí)際高度。

同理

clientWidth、offsetWidth 和 scrollWidth

的解釋與上面相同，只是把高度換成寬度即可。

說(shuō)明

以上基于 DTD HTML 4.01 Transitional，如果是 DTD XHTML 1.0 Transitional

則意義又會(huì)不同，在 XHTML 中這三個(gè)值都是同一個(gè)值，都表示內(nèi)容的實(shí)際高度。新版本的瀏覽器大多支持根據(jù)頁(yè)面指定的 DOCTYPE

來(lái)啟用不同的解釋器。下載或?yàn)g覽測(cè)試文件。

關(guān)系公式:scrollHeight = offsetHeight+ scrollTop

上面的方法大家明白了嗎？趕緊復(fù)制下來(lái)運(yùn)行下，看看效果吧?。。?！大家在用的時(shí)候給自己要同樣高度的兩個(gè)div加上id，在jquery里面調(diào)用的標(biāo)識(shí)修改即可！很方便的，那個(gè)jquery.min.js大家可以任意下載，哪里都有的！

jquery動(dòng)態(tài)創(chuàng)建iframe并自適應(yīng)寬度和高度

自適應(yīng)誰(shuí)的寬高？

script type="text/javascript"

$(document).ready(function(){

var if_w=$("body").width();

var if_h=$(window).height();

alert(if_w+"---"+if_h)

$("iframe src='' width='"+if_w+"' height='"+if_h+"' /").prependTo('body');

});

/script

jquery 使頁(yè)面頁(yè)面高度自適應(yīng)，resize()中重新計(jì)算

同意上面的。

可以用百分比。

不過(guò)你要先把這幾個(gè)容器都放到一個(gè)大容器里面

然后大容器的高度用js去計(jì)算，設(shè)定為瀏覽器窗口的高度，這樣父級(jí)有了具體的高度，里面的高度使用百分比才有意義。。

教你用jquery實(shí)現(xiàn)iframe自適應(yīng)高度

iframe代碼，注意要寫ID

復(fù)制代碼

代碼如下:

iframe

src="test.html"

id="main"

width="700"

height="300"

frameborder="0"

scrolling="auto"/iframe

jquery代碼一：

復(fù)制代碼

代碼如下:

//注意：下面的代碼是放在test.html調(diào)用

$(window.parent.document).find("#main").load(function(){

var

main

=

$(window.parent.document).find("#main");

var

thisheight

=

$(document).height()+30;

main.height(thisheight);

});

jquery代碼二：

復(fù)制代碼

代碼如下:

//注意：下面的代碼是放在和iframe同一個(gè)頁(yè)面調(diào)用

$("#main").load(function(){

var

mainheight

=

$(this).contents().find("body").height()+30;

$(this).height(mainheight);

});

jquery iframe 自適應(yīng)高度的方法 高分求，

一般調(diào)用iframe外部應(yīng)用頁(yè)面，還是要遵循本頁(yè)面設(shè)置樣式的，比如用戶須知的iframe調(diào)用！

至于高度自適應(yīng)，同樣可以用css('overflow','hidden')；

希望幫到你了！

網(wǎng)站名稱：jquery自適應(yīng)高度,css高度自適應(yīng)怎么實(shí)現(xiàn)
網(wǎng)頁(yè)鏈接：http://jinyejixie.com/article6/dssesig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、App設(shè)計(jì)、網(wǎng)站排名、電子商務(wù)、做網(wǎng)站、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)