如何使用 CSS 为 div 标签赋予浏览器窗口 100% 的高度?
在进行 Web 开发项目时，经常需要为 div 标签赋予浏览器窗口的完整高度。这在创建全页布局、主页面或需要跨越整个垂直空间的元素时尤其有用。
然而，由于 CSS 盒子模型的特性以及 height 属性的默认行为，使用 CSS 实现此预期效果可能有些棘手。
在本文中，我们将探索使用 CSS 为 div 标签赋予浏览器窗口 100% 高度的不同技巧。我们将讨论各种 CSS 方法，并为每种方法提供实用的代码示例。
使用 Height: 100%
为 div 标签赋予 100% 高度的一种方法是使用 height: 100% 属性。然而，需要注意的是，这种方法存在一些挑战和局限性。
通过在 div 元素上设置 height: 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 的类名为"container"，目标 div 的类名为"content"。应用 CSS 样式来实现所需的效果。
关键区别在于，我们在"container"类上设置了 height: 100vh 。这使得容器 div 扩展到视口的整个高度。容器内的"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>
在此代码片段中，我们有一个类名为"container"的父 div 元素和一个类名为"content"的子 div。应用 CSS 样式来利用 Flexbox 实现 100% 高度。
通过在"container"类上设置 display: flex，我们创建了一个 Flexbox 容器。添加 flex-direction: column 属性可确保子元素垂直堆叠。height: 100vh 属性使容器扩展以填充视口的整个高度。
为了让"content"div 占据剩余的垂直空间，我们设置了 flex-grow: 1。这将指示"content"元素扩展并填充 Flexbox 容器内的可用空间。
技巧 3:使用 CSS 网格
CSS 网格是另一个强大的布局模块，可让您轻松创建复杂的基于网格的布局。它还可以用来实现 div 标签高度的 100%。
利用 CSS 网格，我们可以创建一个网格容器，它可以扩展以填充可用的垂直空间。以下是一段完整的代码片段，演示了这项技术 −
示例
<!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>
在此代码片段中，我们有一个类名为"container"的父 div 元素和一个类名为"content"的子 div。应用 CSS 样式以利用 CSS 网格实现 100% 高度。
通过在"container"类上设置 display: grid，我们创建了一个 CSS 网格容器。grid-template-rows: 1fr 属性将行模板设置为 1fr，这意味着可用空间在各行之间均匀分布。这确保了"content"div 占据了容器的整个高度。
height: 100vh 属性使容器扩展以填充视口的整个高度。
技巧 4:使用绝对定位
另一种使 div 标签的高度达到浏览器窗口 100% 高度的技巧是使用绝对定位。通过绝对定位 div 元素并将其 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>
在此代码片段中，我们有一个类名为"container"的父 div 元素和一个类名为"content"的子 div。CSS 样式用于利用 Flexbox 并处理溢出。
与技巧 2 类似，我们在"container"类上设置 display: flex 来创建一个 Flexbox 容器。flex-direction: column 属性确保子元素垂直堆叠。
通过在"content"类上设置 flex-grow: 1，div 会扩展以占据容器内剩余的垂直空间。此外，我们使用 overflow: auto 来启用内容的垂直滚动(如果内容超出了 div 的高度)。
结论
在 CSS 中，可以使用多种技巧来实现 <div> 标签的 100% 高度。通过利用 CSS 属性(例如 height: 100vh、Flexbox、CSS Grid 和绝对定位)，我们可以创建填充整个浏览器窗口高度的响应式布局。
每种技术都有其优势，并且可能更适合您项目的具体需求。在选择合适的方法时，务必考虑内容溢出和浏览器兼容性等因素。
通过理解和实施这些技术，您可以确保您的 <div> 标签能够动态适应视口高度，从而提供无缝且视觉上引人入胜的用户体验。尝试这些方法，并选择最符合您需求的方法。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
