div 是 HTML 中的一個常見標簽，被用來定義 HTML 文檔中的一個區塊。默認情況下，div 的寬度和高度僅占據其內部內容所需的空間。然而，有時我們希望讓 div 填滿整個網頁的寬度或高度，以適應不同屏幕尺寸或實現特定布局效果。本文將介紹幾個通過代碼實現 div 填滿網頁的案例。
案例一： 假設我們希望將一個 div 填滿整個瀏覽器窗口的寬度，可以通過如下代碼實現：
在此例中，我們使用 CSS 樣式指定了 body 與 html 標簽的高度和寬度為100%，并且設置了內容的內邊距與外邊距均為0。同時，我們利用了 overflow: hidden 屬性隱藏了可能出現的滾動條。然后，我們給特定的 div（id="myDiv"）設置了高度和寬度為100%。此時，myDiv 將填滿整個瀏覽器窗口的寬度。
案例二： 現在假設我們希望讓一個 div 填滿整個網頁的高度，可以通過如下代碼實現：
在此例中，我們同樣指定了 body 與 html 標簽的高度和寬度為100%，并且設置了內容的內邊距與外邊距均為0，同時隱藏了可能出現的滾動條。然后，我們給 div 設置了高度和寬度均為100%。此時，myDiv 將填滿整個網頁的高度。
以上是兩個簡單的案例，展示了如何通過代碼讓 div 填滿整個網頁的寬度或高度。實際應用中，可以根據具體需求進行相應的修改和擴展。希望這些案例能幫助讀者更好地理解如何讓 div 填滿整個網頁。
案例一： 假設我們希望將一個 div 填滿整個瀏覽器窗口的寬度，可以通過如下代碼實現：
<p><!DOCTYPE html></p>
<p><html></p>
<p><head></p>
<p><style></p>
<p>body, html {</p>
<p> margin: 0;</p>
<p> padding: 0;</p>
<p> overflow: hidden;</p>
<p> height: 100%;</p>
<p>}</p>
<p>#myDiv {</p>
<p> height: 100%;</p>
<p> width: 100%;</p>
<p> background-color: #f2f2f2;</p>
<p>}</p>
<p></style></p>
<p></head></p>
<p><body></p>
<p><div id="myDiv"></p>
<p> <p>這是一個填滿整個網頁寬度的 div</p></p>
<p></div></p>
<p></body></p>
<p></html></p>在此例中，我們使用 CSS 樣式指定了 body 與 html 標簽的高度和寬度為100%，并且設置了內容的內邊距與外邊距均為0。同時，我們利用了 overflow: hidden 屬性隱藏了可能出現的滾動條。然后，我們給特定的 div（id="myDiv"）設置了高度和寬度為100%。此時，myDiv 將填滿整個瀏覽器窗口的寬度。
案例二： 現在假設我們希望讓一個 div 填滿整個網頁的高度，可以通過如下代碼實現：
<p><!DOCTYPE html></p>
<p><html></p>
<p><head></p>
<p><style></p>
<p>body, html {</p>
<p> margin: 0;</p>
<p> padding: 0;</p>
<p> overflow: hidden;</p>
<p> width: 100%;</p>
<p> height: 100%;</p>
<p>}</p>
<p>#myDiv {</p>
<p> width: 100%;</p>
<p> height: 100%;</p>
<p> background-color: #f2f2f2;</p>
<p>}</p>
<p></style></p>
<p></head></p>
<p><body></p>
<p><div id="myDiv"></p>
<p> <p>這是一個填滿整個網頁高度的 div</p></p>
<p></div></p>
<p></body></p>
<p></html></p>在此例中，我們同樣指定了 body 與 html 標簽的高度和寬度為100%，并且設置了內容的內邊距與外邊距均為0，同時隱藏了可能出現的滾動條。然后，我們給 div 設置了高度和寬度均為100%。此時，myDiv 將填滿整個網頁的高度。
以上是兩個簡單的案例，展示了如何通過代碼讓 div 填滿整個網頁的寬度或高度。實際應用中，可以根據具體需求進行相應的修改和擴展。希望這些案例能幫助讀者更好地理解如何讓 div 填滿整個網頁。