CSS 如何将标签设置为浏览器窗口的100%高度

在Web开发项目中，经常需要将

标签设置为浏览器窗口的完整高度。这在创建全屏布局、主要部分或占据整个垂直空间的元素时特别有用。

然而，由于CSS Box模型的特性和高度属性的默认行为，使用CSS实现这个效果可能会有些棘手。

在本文中，我们将探讨不同的技术，使用CSS将

标签设置为浏览器窗口的100%高度。我们将讨论各种CSS方法，并为每个技术提供实际的代码示例。

使用Height: 100%

将div标签设置为100%高度的一种方法是使用高度: 100%属性。然而，需要注意的是，这种方法存在一些挑战和限制。

通过在div元素上设置高度: 100%，您指示它占用父元素的100%高度。当父元素在CSS中明确定义了固定高度时，这种方法效果良好。然而，对于浏览器窗口本身来说，html和body元素（div标签的父元素）默认没有固定高度。

要使div标签填充整个浏览器窗口的高度，您需要确保父元素（html和body）的高度为100%。您可以通过应用以下CSS来实现：

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      html, body {
         height: 100%;
         margin: 0;
         padding: 0;
      }   
      .container {
         height: 100%;
         background-color: lightgray;
         display: flex;
         align-items: center;
         justify-content: center;
      }   
      .content {
         width: 300px;
         height: 200px;
         background-color: white;
         border: 1px solid gray;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="content">
         <!-- Content goes here -->
      </div>
   </div>
</body>
</html>

一旦父元素的高度为100%，在目标div标记上设置height: 100%将使其扩展以填充整个浏览器窗口的高度。

但是，在使用这种方法时需要考虑几个问题： −

滚动 − 如果div内部的内容超过浏览器窗口的高度，将出现滚动条以允许滚动内容。
嵌套元素 − 如果div标记嵌套在其他具有基于百分比的高度的元素中，则需要确保所有父元素的高度为100%，才能正确使用这种方法。
兼容性 − 旧版本的Internet Explorer（IE）可能不正确支持height: 100%方法，因此在不同浏览器上测试你的实现非常重要。

虽然height: 100%方法在某些情况下可以是一个简单的解决方案，但它有其局限性并可能需要额外的考虑。在下面的章节中，我们将探讨提供更灵活和更好浏览器支持的替代技术。

方法1：使用Height: 100vh

给div标记设置100%的浏览器窗口高度的另一种技术是使用height: 100vh属性。vh单位代表视口高度的百分比。

通过在div元素上设置height: 100vh，您可以指示它占用视口高度的100%，而不管其父元素如何。这种方法提供了一个更直接的解决方案，无需显式设置父元素的高度。

示例

下面是一个完整的代码片段，演示了这种技术−

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         height: 100vh;
         background-color: lightgray;
         display: flex;
         align-items: center;
         justify-content: center;
      }   
      .content {
         width: 300px;
         height: 200px;
         background-color: white;
         border: 1px solid gray;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="content">
         <!-- Content goes here -->
      </div>
   </div>
</body>
</html>

在这段代码示例中，我们有与之前相似的HTML结构，父级div具有”class = container”的类，目标div具有”class = content”的类。应用CSS样式以实现所需效果。

关键区别在于在”class = container”上设置了height: 100vh。这使得容器div扩展到视口的整个高度。内部的”class =content” div继承了高度，也会拉伸以填满整个视口的高度。

通过使用height: 100vh的方法，您可以在不显式设置父元素的高度的情况下轻松实现全高度div。

方法2：使用Flexbox

Flexbox是一个强大的CSS布局模块，提供了一种灵活的方式来分布和对齐容器内的元素。它也可用于实现div标记的100％高度。

通过利用Flexbox属性，我们可以创建一个扩展以填充可用垂直空间的容器。以下是一个完整的代码示例，演示了这种技术−

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         display: flex;
         flex-direction: column;
         height: 100vh;
         background-color: lightgray;
      }   
      .content {
         flex-grow: 1;
         background-color: white;
         border: 1px solid gray;
         margin: 20px;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="content">
         <!-- Content goes here -->
      </div>
   </div>
</body>
</html>

在此代码示例中，我们有一个父div元素，class为”container”，以及一个class为”content”的子div。应用CSS样式来利用Flexbox实现100%的高度。

通过在”container”类上设置display: flex，我们创建了一个Flexbox容器。通过添加flex-direction: column确保子元素垂直堆叠。height: 100vh属性使容器扩展以填充整个视口的高度。

要使”content” div占据剩余的垂直空间，我们设置flex-grow: 1。这指示”content”元素在Flexbox容器中增长并填充可用的空间。

方法3：使用CSS网格

CSS Grid是另一个强大的布局模块，可以轻松创建复杂的基于网格的布局。它也可以用来实现div标记的100%高度。

通过利用CSS Grid，我们可以创建一个网格容器，该容器扩展以填充可用的垂直空间。下面是一个完整的代码片段，演示了这种技术。 −

例子

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         display: grid;
         grid-template-rows: 1fr;
         height: 100vh;
         background-color: lightgray;
      }   
      .content {
         background-color: white;
         border: 1px solid gray;
         margin: 20px;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="content">
         <!-- Content goes here -->
      </div>
   </div>
</body>
</html>

在这个代码片段中，我们有一个父级

元素，具有”class”为”container”的类，以及一个孩子

具有”class”为”content”的类。应用了CSS样式以利用CSS Gr邃为实现100%的高度。

通过在”class”为”container”的元素上设置”display: grid”，我们创建了一个CSS Grid容器。”grid-template-rows: 1fr”属性将行模板设置为1fr，这意味着可用空间平均分配给行。这确保了”content” div占据了容器的整个高度。

“height: 100vh”属性使容器扩展以填充视口的整个高度。

方法4: 使用绝对定位

另一种使

标签具有浏览器窗口100%高度的技术是使用绝对定位。通过将

元素绝对定位，并将其top、bottom、left和right属性设置为0，我们可以使其扩展以填充整个视口的高度。

示例

以下是一个完整的示例片段，演示了这种技术。

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         position: relative;
         height: 100vh;
         background-color: lightgray;
      }   
      .content {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         background-color: white;
         border: 1px solid gray;
         margin: 20px;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="content">
         <!-- Content goes here -->
      </div>
   </div>
</body>
</html>

在这个代码片段中，我们有一个带有“container”类的父div元素和一个带有“content”类的子div。应用CSS样式以利用绝对定位实现100%高度。

通过在“container”类上设置position: relative，我们为子div建立了一个定位上下文。这使我们能够将“content”div相对于其父元素进行绝对定位。

top: 0，bottom: 0，left: 0和right: 0属性将“content”div分别定位在其父元素的上、下、左和右边缘。这会导致它拉伸并填充整个容器的高度。

方法5：使用Flexbox与Overflow

在某些情况下，您可能会遇到内容超过视口高度的div的情况。在这种情况下，您可以使用Flexbox和overflow属性的组合，确保div保持100%的高度，同时允许内容溢出时滚动。

示例

下面是一个完整的运行示例，演示了这种技术−

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         display: flex;
         flex-direction: column;
         height: 100vh;
         background-color: lightgray;
      }   
      .content {
         flex-grow: 1;
         background-color: white;
         border: 1px solid gray;
         margin: 20px;
         overflow: auto;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="content">
         <!-- Content goes here -->
      </div>
   </div>
</body>
</html>

在这段代码片段中，我们有一个带有”class”属性为”container”的父元素div和一个带有”class”属性为”content”的子元素div。CSS样式应用了Flexbox并处理了溢出。

类似于技术2，我们在”class”为”container”的元素上设置了display:flex来创建一个Flexbox容器。flex-direction:column属性确保子元素垂直堆叠。

通过在”class”为”content”的元素上设置flex-grow:1，该div会扩展以占据容器中的剩余垂直空间。此外，我们使用overflow:auto来启用内容的垂直滚动，如果内容超出div的高度。