在開發(fā)網(wǎng)頁的過程中，常常需要把一段內(nèi)容分成三塊并且縱向鋪滿整個屏幕的布局。在 CSS 中，我們可以使用 Flexbox 或者 Grid Layout 來實現(xiàn)這個效果。

/* 布局方式一：Flexbox */
.container {
display: flex;
flex-direction: column;
height: 100vh; /* 讓容器撐滿整個視口 */
}
.item {
flex: 1; /* 讓所有子元素均等分容器的高度 */
}
/* 布局方式二：Grid Layout */
.container {
display: grid;
grid-template-rows: repeat(3, 1fr); /* 讓三行子元素的高度均等分 */
height: 100vh;
}
.item {
grid-row: span 1; /* 讓每個子元素都跨越一行 */
}

上面的代碼中，我們首先創(chuàng)建一個包含三個子元素的容器，每個子元素都應(yīng)該占據(jù)平均的高度。在 Flexbox 布局中，我們可以使用display: flex和flex-direction: column來讓容器內(nèi)的子元素縱向排列；在 Grid Layout 布局中，我們可以使用display: grid和grid-template-rows: repeat(3, 1fr)讓容器內(nèi)的子元素分成三等份并跨越整個容器的高度。

接著，我們給每個子元素設(shè)置了一個相同的flex: 1或者grid-row: span 1，以便讓它們都占據(jù)平均的高度。這樣，我們就可以很容易地實現(xiàn)三塊縱向鋪滿整個屏幕的布局了。

總之，F(xiàn)lexbox 和 Grid Layout 都是非常強大且靈活的布局方式，對于網(wǎng)頁開發(fā)來說都是非常值得學(xué)習(xí)和掌握的。希望這篇文章能夠?qū)δ阌兴鶐椭?/p>