本文目錄導(dǎo)讀：

1. 使用百分比布局
2. 使用視窗單位（vw/vh）
3. 使用flexbox布局
4. 使用CSS Grid布局

CSS布局技巧：實現(xiàn)容器鋪滿頁面

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要讓某個容器元素鋪滿整個頁面，這可以通過使用CSS來實現(xiàn)，本文將介紹幾種常用的方法，幫助你在布局時更加靈活和高效。

使用百分比布局

百分比布局是一種相對布局方式，通過將容器的寬度和高度設(shè)置為100%，可以讓容器鋪滿頁面，這種方法適用于父容器有足夠空間的情況。

.container {
  width: 100%;
  height: 100%;
}

使用視窗單位（vw/vh）

視窗單位是一種相對單位，其中vw代表視窗寬度的百分比，vh代表視窗高度的百分比，通過設(shè)置容器的寬度和高度為100vw和100vh，可以讓容器鋪滿整個視窗（瀏覽器窗口）。

.container {
  width: 100vw;
  height: 100vh;
}

使用flexbox布局

Flexbox是一種靈活的布局方式，可以實現(xiàn)復(fù)雜的頁面布局，通過將父容器設(shè)置為flex容器，并設(shè)置其子元素為flex子項，可以讓容器鋪滿頁面。

.container {
  display: flex; /* 或 flexbox */
  justify-content: stretch; /* 子元素沿主軸方向拉伸 */
  align-items: stretch; /* 子元素沿交叉軸方向拉伸 */
}

使用CSS Grid布局

CSS Grid布局是一種強(qiáng)大的二維布局系統(tǒng)，適用于創(chuàng)建復(fù)雜的網(wǎng)頁布局，通過設(shè)置容器的grid屬性，可以實現(xiàn)容器鋪滿頁面的效果。

.container {
  display: grid; /* 或 grid-container */
  grid-template-columns: auto; /* 自動填充列 */
  grid-template-rows: auto; /* 自動填充行 */
}