在網頁設計中，經常需要將某個元素的寬度設置為100%，以使其能夠鋪滿整個屏幕。而在HTML和CSS中，我們可以使用<div>元素來實現這個效果。

所謂的<div>元素是一個“塊級元素”，它可以容納其他元素，并且默認情況下，它的寬度是自動適應其父元素的寬度。我們可以通過修改<div>元素的CSS樣式來實現它的100%寬度。

下面是一些代碼案例，用于詳細解釋如何使用<div>實現100%滿屏效果：

案例一：設置<div>的寬度為100%

<code>
<style>
.fullscreen {
width: 100%;
}
</style>
</code>

在這個案例中，我們定義了一個名為fullscreen的CSS類，通過設置寬度為100%使<div>元素鋪滿整個屏幕。然后，將這個類應用到我們想要實現100%滿屏效果的<div>元素上。

案例二：使用absolute定位

<code>
<style>
.fullscreen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</code>

在這個案例中，我們通過設置position屬性為absolute以及top、left、width和height屬性的值為0和100%來實現100%滿屏效果。這樣，<div>元素將占據整個屏幕的空間。

案例三：使用Flexbox布局

<code>
<style>
.container {
display: flex;
height: 100vh;
}
.fullscreen {
flex: 1;
}
</style>
</code>

在這個案例中，我們使用了Flexbox布局來實現100%滿屏效果。我們將包含<div>元素的容器設置為flex，并且將高度設置為100vh（視口高度）。然后，將<div>元素的flex屬性設置為1，使其占據剩余的空間。

通過以上這些案例，我們可以看到使用<div>元素可以很方便地實現100%滿屏效果。無論是簡單地設置寬度為100%還是使用復雜的定位或布局，<div>元素都能幫助我們實現這個需求。