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

1. 使用百分比寬度
2. 使用CSS Grid布局

CSS技巧：實(shí)現(xiàn)全屏的div布局

在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常需要讓某個(gè)div元素占據(jù)整個(gè)屏幕空間，這可以通過CSS（層疊樣式表）來實(shí)現(xiàn)，本文將介紹幾種常見的方法，幫助你將div元素鋪滿屏幕。

使用百分比寬度

將div元素的寬度設(shè)置為100%，可以使其水平占據(jù)整個(gè)屏幕寬度，可以設(shè)置高度為100vh（視口高度的百分比），以確保垂直方向也占滿屏幕。

.full-screen-div {
  width: 100%;
  height: 100vh;
}

使用CSS Grid布局

CSS Grid布局是一種強(qiáng)大的頁(yè)面布局系統(tǒng)，可以輕松實(shí)現(xiàn)全屏div，你可以將body元素設(shè)置為一個(gè)grid容器，然后將你的div放在這個(gè)容器中，使其占據(jù)整個(gè)空間。

body {
  display: grid;
  place-items: center; /* 可選，使內(nèi)容居中對(duì)齊 */
}
.full-screen-div {
  grid-area: 1 / 1 / auto / auto; /* 設(shè)置網(wǎng)格區(qū)域以覆蓋整個(gè)網(wǎng)格 */
}

三. 使用Flexbox布局

Flexbox布局也是一種有效的頁(yè)面布局方式，你可以將body元素設(shè)置為一個(gè)flex容器，然后設(shè)置你的div元素為flex子項(xiàng)，并使用flex屬性使其充滿整個(gè)屏幕。

body {
  display: flex; /* 設(shè)置flex容器 */
  justify-content: center; /* 可選，使內(nèi)容水平居中對(duì)齊 */
  align-items: stretch; /* 可選，使內(nèi)容垂直方向拉伸填滿整個(gè)容器 */
}
.full-screen-div { /* 設(shè)置div元素為flex子項(xiàng) */
  flex: 1; /* 使元素充滿整個(gè)容器空間 */
}

就是幾種常見的實(shí)現(xiàn)全屏div布局的方法，你可以根據(jù)你的具體需求和項(xiàng)目情況選擇合適的方法，這些方法也可以結(jié)合其他CSS屬性和技術(shù)（如媒體查詢、響應(yīng)式設(shè)計(jì)等）來實(shí)現(xiàn)更復(fù)雜的布局效果。