JQuery是一個非常流行的JavaScript庫，可以輕松實現各種前端交互效果。其中，div元素是最常用的容器元素，可以用于包裹各種類型的元素。在不同的頁面布局中，我們常常需要對div的尺寸進行自適應調整，使其能夠完美適應不同的屏幕尺寸和內容大小。

實現div自適應的關鍵是設置其寬度和高度屬性。通常情況下，我們可以使用CSS中的幾個屬性來實現，如width、height、max-width、max-height、min-width、min-height等。然而，當div元素嵌套在其他元素中時，其寬高屬性可能會受到父元素的限制，導致不能實現自適應。

<div class="container">
<div class="box">一些內容</div>
</div>

這時，我們可以使用jQuery的height()和width()方法，動態獲取和設置div的高度和寬度，實現自適應效果。其中，height()和width()方法可以接受一個回調函數作為參數，使得div的高度和寬度可以根據內容的變化而自適應調整。

$(document).ready(function(){
$(".box").height(function(){
// 自適應高度代碼
return $(this).parent().height();
});
$(".box").width(function(){
// 自適應寬度代碼
return $(this).parent().width();
});
});

在上述代碼中，我們使用了$(document).ready()方法，在DOM樹加載完成后執行自適應代碼。其中，回調函數中的$(this)指向當前被選擇的.box元素，$(this).parent()則指向其父元素.container，通過獲取容器元素的寬高值，實現div的自適應效果。

<div class="container">
<div class="box">一些內容</div>
</div>

同時，我們還可以利用jQuery的resize()方法，在窗口大小發生變化時自動觸發自適應代碼，實現更好的用戶體驗。

$(window).resize(function(){
$(".box").height(function(){
// 自適應高度代碼
return $(this).parent().height();
});
$(".box").width(function(){
// 自適應寬度代碼
return $(this).parent().width();
});
});

通過以上方法，我們可以輕松實現div元素的自適應高度和寬度，使其能夠適應不同的頁面布局和內容需求，優化頁面的用戶體驗。