在頁面布局（layout）時經常是上左右的框架布局并且需要寬、高度的自適應，靜態的div+css是無法實現，但是利用jQuery比較容易實現瀏覽器的兼容性，所以需要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()?-?30;
????$('#left').height(h);
????$('#right').height(h-20);
}

?

?

轉載于:https://www.cnblogs.com/greatandforever/archive/2010/09/29/1838512.html

總結

以上是生活随笔為你收集整理的jQuery实现布局高宽自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。