如何让 div 填满屏幕 - CSS

在网页设计中，有时候需要让一个 div 填满整个屏幕。本文将介绍几种实现方法。

1. 使用绝对定位（position:absolute;top:0;bottom:0;left:0;right:0;）

这是最简单的方法，只需要设置 div 的 position 属性为 absolute，然后将 top、bottom、left、right 属性都设为 0 即可，代码如下：

#div{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

这种方法适用于 div 的父元素具有明确的高度和宽度，因此不适合使用于响应式设计。

2. 使用 flex 布局（display:flex;height:100vh;width:100vw;）

flex 布局是一种非常流行的响应式设计方法，可以方便地实现一些复杂的布局需求。要让一个 div 充满屏幕，只需要将其父元素的 display 属性设置为 flex，并将 height 和 width 属性都设置为 100vh 和 100vw 即可，代码如下：

#parent{
    display: flex;
    height: 100vh;
    width: 100vw;
}

#div{
    flex: 1;
}

3. 使用 grid 布局（display:grid;grid-template-rows:1fr;grid-template-columns:1fr;）

grid 布局可以更精确地控制元素的位置和大小，也是一种非常流行的响应式设计方法。要让一个 div 充满屏幕，只需要将其父元素的 display 属性设置为 grid，并将 grid-template-rows 和 grid-template-columns 属性都设置为 1fr 即可，代码如下：

#parent{
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
}

#div{
    grid-row: 1;
    grid-column: 1;
}

以上三种方法都可以实现让一个 div 填满整个屏幕的效果，具体使用要根据实际需求进行选择。