用CSS使DIV全屏高度

在网页设计中，有时需要将某个DIV元素设置为全屏高度，以扩展其背景或填满整个浏览器窗口。下面我们就来介绍如何用CSS实现这一效果。

方法一：使用vh单位

vh单位表示相对于视口高度的百分比，例如100vh表示视口高度的100%。因此，我们可以通过将DIV元素的高度设置为100vh来实现全屏高度。示例代码如下：

.div {
  height: 100vh;
}

方法二：使用绝对定位

将DIV元素的位置设置为绝对定位，并让其上、下、左、右四条边都与父元素对齐，即可让其填满父元素，从而实现全屏高度。示例代码如下：

.parent {
  position: relative;
}
.div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

方法三：使用flex布局

通过flex布局，我们可以让元素自适应父容器的高度。示例代码如下：

.parent {
  display: flex;
  flex-direction: column;
}
.div {
  flex: 1;
}

总结

以上三种方法都能实现让DIV元素填满整个屏幕高度的效果。选择哪一种方法取决于具体情况，例如是否需要响应式布局、是否需要兼容旧版浏览器等因素。