jQuery實現(xiàn)布局高寬自適應(yīng)的簡單實例
在頁面布局(layout)時經(jīng)常是上左右的框架布局并且需要寬、高度的自適應(yīng),div+css是無法實現(xiàn)(*hegz: div+css其實是可以實現(xiàn)的,利用jQuery比較容易實現(xiàn)瀏覽器的兼容性),所以需要js來輔助。
主要通過 jQuery.resize() 這個方法,也就是當窗口大小改變時重新計算布局的高寬。其它直接看代碼即可。
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實現(xiàn)布局高寬自適應(yīng)的簡單實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- jQuery自適應(yīng)輪播圖插件Swiper用法示例
- jQuery簡單實現(xiàn)iframe的高度根據(jù)頁面內(nèi)容自適應(yīng)的方法
- jquery自適應(yīng)布局的簡單實例
- jquery實現(xiàn)textarea 高度自適應(yīng)
- 使用jQuery和Bootstrap實現(xiàn)多層、自適應(yīng)模態(tài)窗口
- 使用jQuery不判斷瀏覽器高度解決iframe自適應(yīng)高度問題
- javascript原生和jquery庫實現(xiàn)iframe自適應(yīng)高度和寬度
- jQuery實現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁面布局
- JQuery加載圖片自適應(yīng)固定大小的DIV
- jQuery實現(xiàn)兩列等高并自適應(yīng)高度
相關(guān)文章
jquery+ajax實現(xiàn)異步上傳文件顯示進度條
這篇文章主要為大家詳細介紹了jquery+ajax實現(xiàn)異步上傳文件顯示進度條,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-08-08關(guān)于JQuery($.load)事件的用法和分析
本篇文章小編為大家介紹,關(guān)于JQuery($.load)事件的用法與分析,有需要的朋友可以關(guān)注一下2013-04-04jQuery實現(xiàn)簡易商城系統(tǒng)項目實操
這篇文章主要介紹了jQuery實現(xiàn)簡易商城系統(tǒng)項目實操,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,感興趣的小伙伴可以參考一下2022-06-06jQuery之DOM對象和jQuery對象的轉(zhuǎn)換與區(qū)別分析
這篇文章主要介紹了jQuery之DOM對象和jQuery對象的轉(zhuǎn)換與區(qū)別分析,對比分析了DOM對象和jQuery對象的原理與用法,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01