div 撐滿 body
在網頁開發中，經常會遇到需要將一個 div 元素撐滿整個 body 的情況。div 是一個 HTML 標簽，它可以被用來劃分頁面的不同區域，以便對其進行樣式和布局的控制。在某些情況下，你可能希望讓一個 div 元素完全填滿整個頁面，即使頁面的內容較少。本文將介紹幾種實現這種效果的方法。
方法一：使用絕對定位
一種簡單的方法是使用絕對定位。我們可以將 div 的定位方式設置為絕對定位，并設置 top、bottom、left 和 right 屬性為 0，以覆蓋整個 body 區域。
<p><style></p>
<p> body {</p>
<p> margin: 0;</p>
<p> padding: 0;</p>
<p> }</p>
<p> .full-width {</p>
<p> position: absolute;</p>
<p> top: 0;</p>
<p> bottom: 0;</p>
<p> left: 0;</p>
<p> right: 0;</p>
<p> }</p>
<p></style></p>
<p><body></p>
<p> <div class="full-width"></div></p>
<p></body></p>上述代碼將會使 div 的寬度和高度都撐滿整個頁面，且不受頁面內容的影響。
方法二：使用 flexbox 布局
另一種常用的方法是使用 flexbox 布局。我們可以將 body 上的 display 屬性設置為 flex，并將 div 的 flex 屬性設置為 1，以使其自動填滿剩余的空間。
<p><style></p>
<p> body {</p>
<p> display: flex;</p>
<p> margin: 0;</p>
<p> padding: 0;</p>
<p> }</p>
<p> .full-width {</p>
<p> flex: 1;</p>
<p> }</p>
<p></style></p>
<p><body></p>
<p> <div class="full-width"></div></p>
<p></body></p>使用 flexbox 布局的好處是可以輕松實現其他布局效果，例如水平居中、垂直居中等。
方法三：使用 grid 布局
除了使用 flexbox，我們還可以使用 CSS grid 布局實現 div 撐滿 body。我們將 body 上的 display 屬性設置為 grid，并設置一個 grid 模板，將 div 放置在網格中。
<p><style></p>
<p> body {</p>
<p> display: grid;</p>
<p> margin: 0;</p>
<p> padding: 0;</p>
<p> height: 100vh;</p>
<p> }</p>
<p> .full-width {</p>
<p> grid-area: 1 / 1 / -1 / -1;</p>
<p> }</p>
<p></style></p>
<p><body></p>
<p> <div class="full-width"></div></p>
<p></body></p>上述代碼將使 div 放置在整個網格中，并撐滿整個 body 區域。這種方法可以讓我們更加靈活地控制布局。
方法四：使用 calc() 函數
除了上述方法，我們還可以使用 calc() 函數來計算 div 的寬度和高度，以使其撐滿整個 body 區域。
<p><style></p>
<p> body {</p>
<p> margin: 0;</p>
<p> padding: 0;</p>
<p> height: 100vh;</p>
<p> }</p>
<p> .full-width {</p>
<p> width: 100%;</p>
<p> height: calc(100vh - 20px);</p>
<p> }</p>
<p></style></p>
<p><body></p>
<p> <div class="full-width"></div></p>
<p></body></p>上述代碼中，calc() 函數用于計算 div 的高度，減去了一個 20px 的間距。這樣可以確保 div 撐滿整個 body 區域，同時提供一些空間留給其他內容。
綜上所述，我們通過使用絕對定位、flexbox 布局、grid 布局和 calc() 函數，可以輕松實現將 div 撐滿整個 body 的效果。根據具體的頁面要求和樣式需求，選擇適合的方法即可。