div 自動鋪滿
在網頁開發中，常常會遇到需要將一個 div 元素自動鋪滿父容器的情況。這意味著 div 元素要占據父容器的全部空間，無論父容器的尺寸如何改變。本文將介紹幾個常用的代碼案例，詳細解釋如何實現 div 自動鋪滿的效果。
案例一：使用絕對定位實現自動鋪滿
通過設置 div 元素的樣式為 "position: absolute; top: 0; right: 0; bottom: 0; left: 0"，可以使 div 元素自動鋪滿父容器。這是因為絕對定位使 div 元素從文檔流中脫離，并相對于其最近的非靜態定位的祖先元素進行定位。通過設置 top、right、bottom 和 left 屬性為 0，div 元素的四個邊將與父容器的四個邊緊貼在一起，從而實現自動鋪滿效果。
下面是一個示例代碼：

<style>
.parent {
position: relative;
width: 500px;
height: 300px;
border: 1px solid #000;
}
.child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: red;
}
</style>
<br>
<div class="parent">
<div class="child"></div>
</div>

案例二：使用 flexbox 實現自動鋪滿
flexbox 是一種強大的布局方式，可以幫助實現一些復雜的布局需求，包括自動鋪滿效果。通過設置父容器的樣式為 "display: flex; flex-direction: column;"，可以使子元素自動鋪滿父容器的高度。其中，display: flex 將父容器變為 flex 容器，flex-direction: column 設置為縱向排列的方式。
下面是一個示例代碼：

<style>
.parent {
display: flex;
flex-direction: column;
width: 500px;
height: 300px;
border: 1px solid #000;
}
.child {
flex: 1;
background-color: green;
}
</style>
<br>
<div class="parent">
<div class="child"></div>
</div>

案例三：使用 grid 布局實現自動鋪滿
類似于 flexbox，grid 布局也是一種強大的布局方式，可以實現更復雜的布局需求。通過設置父容器的樣式為 "display: grid;"，可以使子元素自動鋪滿父容器的全部空間。
下面是一個示例代碼：

<style>
.parent {
display: grid;
width: 500px;
height: 300px;
border: 1px solid #000;
}
.child {
background-color: blue;
}
</style>
<br>
<div class="parent">
<div class="child"></div>
</div>

這幾個案例展示了如何使用不同的布局方式實現 div 自動鋪滿的效果。無論是絕對定位、flexbox 還是 grid 布局，都可以滿足不同場景下的需求。在實際開發中，可以根據具體的布局需求選擇合適的方式來實現 div 自動鋪滿的效果。
參考文獻： - https://www.w3schools.com/css/css_positioning.asp - https://www.w3schools.com/css/css3_flexbox.asp - https://www.w3schools.com/css/css_grid.asp