在网页设计中，常常会遇到需要让 div 标签高度与浏览器窗口高度相等的需求。这种效果能够为用户带来更舒适、沉浸式的浏览体验。下面就为大家详细介绍几种实现该效果的方法。

使用 CSS 的 height 和 viewport 单位是一种简单直接的方式。viewport 单位是相对于浏览器视口大小的单位，其中 vh 表示视口高度的 1%。要让一个 div 的高度等于浏览器窗口高度，只需设置 height: 100vh。例如：

div {
    height: 100vh;
    background-color: lightblue;
}

这段代码中，div 的高度被设置为浏览器视口高度的 100%，同时为了方便查看效果，设置了浅蓝色的背景颜色。

利用 flexbox 布局也能轻松达成目标。flexbox 是 CSS3 引入的强大布局模式。通过设置父元素的 display 为 flex 或 column，并对 div 元素使用 flex-grow: 1 来使其占据剩余空间，从而实现与浏览器窗口高度相等。示例代码如下：

html, body {
    height: 100%;
    margin: 0;
}
.parent {
    display: flex;
    flex-direction: column;
    height: 100%;
}
div {
    flex-grow: 1;
    background-color: lightcoral;
}

这里先将 html 和 body 的高度设置为 100%，确保父元素有足够的高度，然后在父元素中使用 flexbox 布局，div 元素通过 flex-grow: 1 填充剩余空间。

另外，grid 布局同样能实现此功能。grid 布局提供了更灵活的二维布局方式。通过设置父元素的 display 为 grid，并定义网格模板行，让 div 元素占据整个高度。代码示例如下：

html, body {
    height: 100%;
    margin: 0;
}
.parent {
    display: grid;
    grid-template-rows: 1fr;
    height: 100%;
}
div {
    background-color: lightgreen;
}

在这段代码中，grid-template-rows: 1fr 表示创建一个占据所有可用空间的行，div 元素就会填满整个高度。

以上就是几种常见的使用 CSS 实现 div 标签高度与浏览器窗口高度相等的方法。开发者可以根据项目的实际需求和布局特点选择合适的方法来实现想要的效果。