css如何将div拉伸到100％的页面高度？

1. 概述

在进行网页布局时，为了使布局更加美观，经常需要将某个元素拉伸到整个页面的高度，例如一个导航栏或者一块视觉效果较好的背景图片。本篇文章就将介绍如何使用CSS将一个div元素拉伸到整个页面的高度。

2. 设置body和html的高度

在进行元素的高度设置之前，需要先设置body和html的高度为100%。这可以确保元素的高度设置基于整个页面的高度，而非只是当前内容区域的高度。代码如下：

html, body {
  height: 100%;
}

3. 设置要拉伸的div的高度

在设置要拉伸的div的高度时，可以使用两种方法来实现：

3.1 方法一：使用vh单位

vh单位指的是可视窗口高度的“百分之几”（viewport height），例如，1vh等于可视窗口高度的1%。因此，如果要使一个元素高度等于整个页面的高度，则可以将其高度设置为100vh。代码如下：

.stretched {
  height: 100vh;
}

该方法的优点是简单直接，代码量少。但是在一些不支持vw/vh单位的旧版浏览器上可能会出现兼容性问题。

3.2 方法二：使用绝对定位

另一种方法是使用绝对定位来使元素达到和页面同样的高度。具体步骤如下：

首先，要拉伸的div必须是相对于一个“相对定位”的父元素进行定位，否则使用绝对定位可能会导致元素脱离文档流。

接下来，设置要拉伸的div的高度为100%。在这里，100%指的是其父元素的高度，而不是整个页面的高度。

最后，为其父元素设置高度为100%。此时，要拉伸的div的高度就等于整个页面的高度了。

具体代码如下：

HTML代码：

<div class="parent">
  <div class="stretched"></div>
</div>

CSS代码：

.parent {
  position: relative;
  height: 100%;
}
.stretched {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
}

该方法的优点是兼容性好，适用性广。但是需要写更多的代码，稍微有些繁琐。

4. 结语

以上就是CSS如何将div拉伸到100％的页面高度的两种方法。具体使用哪种方法要根据实际情况进行选择，但无论哪种方法都需要先设置好html和body的高度。