如何用jquery實現(xiàn)高度自適應

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

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

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

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

""

htmlxmlns=""

head

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

titlejQuery實現(xiàn)左右div自適應高度完全相同/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)站建設工作室br/

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

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

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

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

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

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

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

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

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

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

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

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

網(wǎng)站建設工作室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

大家對 clientHeight

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

offsetHeight

IE、Opera

認為 offsetHeight = clientHeight + 滾動條 + 邊框。

NS、FF 認為 offsetHeight

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

scrollHeight

IE、Opera 認為 scrollHeight

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

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

clientHeight。

簡單地說

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

NS、FF 認為

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

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

IE、Opera 認為 offsetHeight

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

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

同理

clientWidth、offsetWidth 和 scrollWidth

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

說明

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

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

來啟用不同的解釋器。下載或瀏覽測試文件。

關系公式:scrollHeight = offsetHeight+ scrollTop

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

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

自適應誰的寬高？

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 使頁面頁面高度自適應，resize()中重新計算

同意上面的。

可以用百分比。

不過你要先把這幾個容器都放到一個大容器里面

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

教你用jquery實現(xiàn)iframe自適應高度

iframe代碼，注意要寫ID

復制代碼

代碼如下:

iframe

src="test.html"

id="main"

width="700"

height="300"

frameborder="0"

scrolling="auto"/iframe

jquery代碼一：

復制代碼

代碼如下:

//注意：下面的代碼是放在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代碼二：

復制代碼

代碼如下:

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

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

var

mainheight

=

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

$(this).height(mainheight);

});

jquery iframe 自適應高度的方法 高分求，

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

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

希望幫到你了！

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

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

廣告

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