快捷導(dǎo)航

jQuery實(shí)現(xiàn)布局高寬自適應(yīng)的簡(jiǎn)單實(shí)例

更新時(shí)間：2016年05月28日 10:11:24 投稿：jingxian

下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)布局高寬自適應(yīng)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在頁(yè)面布局（layout）時(shí)經(jīng)常是上左右的框架布局并且需要寬、高度的自適應(yīng)，div+css是無(wú)法實(shí)現(xiàn)（*hegz： div+css其實(shí)是可以實(shí)現(xiàn)的，利用jQuery比較容易實(shí)現(xiàn)瀏覽器的兼容性），所以需要js來(lái)輔助。

主要通過(guò) jQuery.resize() 這個(gè)方法，也就是當(dāng)窗口大小改變時(shí)重新計(jì)算布局的高寬。其它直接看代碼即可。

Html代碼

<div id="header"></div> 
<div id="left"></div> 
<div id="right"></div>

Js代碼

$(document).ready(function() {  
  initLayout();  
  $(window).resize(function(){  
    initLayout();  
  });  
});  
function initLayout() {  
  $('#right').width(document.documentElement.clientWidth - $("#left").width()-2);  
  var h = document.documentElement.clientHeight - $("#header").height()-5;  
  $('#left').height(h);  
  $('#right').height(h);  
}

以上這篇jQuery實(shí)現(xiàn)布局高寬自適應(yīng)的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Jquery修改image的src屬性,圖片不加載問(wèn)題的解決方法
下面小編就為大家?guī)?lái)一篇Jquery修改image的src屬性,圖片不加載問(wèn)題的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
jquery 交替為表格添加樣式的代碼
學(xué)習(xí)了jquery,發(fā)現(xiàn)其功能真的很令我驚訝，為表格添加背景色用css也可以實(shí)現(xiàn)，卻不得不在<tr>標(biāo)簽里一行一行地添加，但用jquery只需四行代碼，就是這樣精簡(jiǎn)的用法，讓我對(duì)jquery產(chǎn)生了極大的興趣，也不得不驚嘆新興的技術(shù)所帶來(lái)的效率！
2010-01-01
jquery驗(yàn)證手機(jī)號(hào)碼、郵箱格式是否正確示例代碼
本文為大家介紹下使用jquery驗(yàn)證郵箱、驗(yàn)證手機(jī)號(hào)碼，具體實(shí)現(xiàn)思路及代碼如下，感興趣的朋友可以學(xué)習(xí)下
2013-07-07
jQuery圖片的展開(kāi)和收縮實(shí)現(xiàn)代碼
圖片的展開(kāi)和收縮使用jquery實(shí)現(xiàn)不可思議吧，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)jquery 有所幫助
2013-04-04
jQuery實(shí)現(xiàn)圖片高亮顯示
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)圖片高亮顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
jQuery中inArray方法注意事項(xiàng)分析
這篇文章主要介紹了jQuery中inArray方法注意事項(xiàng),結(jié)合實(shí)例形式分析了jQuery中inArray方法變量判斷的相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-01-01
Jqgrid設(shè)置全選(選擇)及獲取選擇行的值示例代碼
本篇文章主要介紹了Jqgrid設(shè)置全選(選擇)及獲取選擇行的值示例代碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
jquery自定義插件——window的實(shí)現(xiàn)【示例代碼】
下面小編就為大家?guī)?lái)一篇jquery自定義插件——window的實(shí)現(xiàn)【示例代碼】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考
2016-05-05
Easyui的組合框的取值與賦值
最近開(kāi)發(fā)了一個(gè)項(xiàng)目，其中有功能要用戶點(diǎn)擊下拉框可以實(shí)現(xiàn)多選的效果，下文給大家分享實(shí)現(xiàn)核心代碼和combobox的取值與賦值的代碼，對(duì)easyui組合框相關(guān)知識(shí)感興趣的朋友一起看看吧
2016-10-10
firefox下jquery iframe刷新頁(yè)面提示會(huì)導(dǎo)致重復(fù)之前動(dòng)作
刷新頁(yè)面會(huì)提示要顯示此頁(yè)面， Firefox 必須發(fā)送將會(huì)導(dǎo)致重復(fù)之前動(dòng)作的數(shù)據(jù),此問(wèn)題很是疑惑,接下來(lái)將為您解答，需要的朋友可以了解下
2012-12-12