<div> 100%填充是指將一個div元素的寬度自動調整為其父元素寬度的100%。這意味著，無論父元素的寬度如何變化，div元素始終會自適應地填充整個父元素的寬度。在本文中，我們將通過幾個代碼案例來詳細說明如何實現div 100%填充的效果。

案例1: 使用CSS的width屬性

下面是一個基本的HTML結構，包含一個父元素和一個子元素，我們將通過CSS的width屬性實現div 100%填充效果：

<div class="container">
<div class="content">
這是一個示例文本。
</div>
</div>
<br>
<style>
.container {
width: 400px; /* 父元素的寬度 */
background-color: lightgray;
}
<br>
.content {
width: 100%; /* 子元素的寬度 */
background-color: gray;
}
</style>

在這個例子中，我們給父元素設置了一個固定寬度，然后給子元素設置了width: 100%，這樣子元素的寬度就會自動填充父元素的寬度的100%。運行代碼，你將看到子元素完全填充了父元素的寬度。

案例2: 使用CSS的flexbox布局

另一種實現div 100%填充的方法是使用CSS的flexbox布局。下面是一個示例代碼：

<div class="container">
<div class="content">
這是一個示例文本。
</div>
</div>
<br>
<style>
.container {
width: 400px; /* 父元素的寬度 */
background-color: lightgray;
display: flex; /* 使用flexbox布局 */
}
<br>
.content {
flex: 1; /* 子元素的flex屬性 */
background-color: gray;
}
</style>

在這個例子中，我們將父元素的display屬性設置為flex，這樣子元素就會基于flexbox布局進行自動調整。然后，我們給子元素設置了flex: 1，這意味著它將會占用剩余的可用空間，從而實現div 100%填充的效果。

案例3: 使用JavaScript動態計算寬度

除了使用CSS，我們還可以使用JavaScript來動態計算寬度，以實現div 100%填充的效果。下面是一個示例代碼：

<div class="container">
<div class="content">
這是一個示例文本。
</div>
</div>
<br>
<style>
.container {
width: 400px; /* 父元素的寬度 */
background-color: lightgray;
}
<br>
.content {
background-color: gray;
}
</style>
<br>
<script>
window.addEventListener('load', function() {
var container = document.querySelector('.container');
var content = document.querySelector('.content');
<br>
  function resizeContent() {
var containerWidth = container.offsetWidth;
content.style.width = containerWidth + 'px';
}
<br>
  resizeContent();
<br>
  window.addEventListener('resize', function() {
resizeContent();
});
});
</script>

在這個例子中，我們通過JavaScript來動態計算子元素的寬度。在頁面加載完畢后，我們獲取父元素的寬度，并將該值賦給子元素的width屬性，實現div 100%填充的效果。同時，我們還添加了一個resize事件監聽器，以便在窗口大小發生變化時重新計算子元素的寬度。
通過以上幾個案例，我們詳細說明了如何實現div 100%填充的效果。這種技術在響應式設計中非常實用，可以幫助我們創建自適應的布局。無論是使用CSS的width屬性、flexbox布局，還是通過JavaScript動態計算寬度，我們都能夠輕松地實現div 100%填充。