CSS 使用“height: 100vh”为容器设置高度时，垂直滚动条出现
在本文中，我们将介绍当使用“height: 100vh”为容器设置高度时，为什么垂直滚动条会出现，并提供一些解决方法。
阅读更多：CSS 教程
问题的原因
在CSS中，我们可以使用“height: 100vh”来为容器设置高度。vh是指视口高度的百分比，即浏览器窗口可见部分的高度。当我们将这个样式应用在容器上时，我们期望该容器的高度与视口高度相同，从而撑满整个屏幕。
然而，当我们使用“height: 100vh”为容器设置高度时，垂直滚动条可能出现的原因是在视口高度之外还有其他内容，例如头部导航栏、页脚等。这些额外的内容会导致容器的实际高度超过了视口高度，从而触发垂直滚动条的出现。
解决方法一：调整其他内容的高度
一种解决方法是通过调整其他内容的高度来避免垂直滚动条的出现。例如，如果有一个固定的头部导航栏，并且希望容器撑满整个屏幕，我们可以通过减去头部导航栏的高度来计算容器的高度。假设头部导航栏的高度为50px，我们可以这样计算容器的高度：
.container {
height: calc(100vh - 50px);
}
这样，容器的实际高度就会减去头部导航栏的高度，从而避免了垂直滚动条的出现。
解决方法二：使用overflow属性
另一种解决方法是使用CSS的overflow属性。通过设置overflow属性为hidden，我们可以隐藏容器内容超出视口高度的部分，从而避免垂直滚动条的出现。例如：
.container {
height: 100vh;
overflow-y: hidden;
}
这样，容器的内容会被裁剪，超出视口高度的部分将不可见，垂直滚动条也会消失。
需要注意的是，使用overflow:hidden属性可能会导致容器内容被裁剪，如果容器存在溢出内容，这种方法可能会隐藏一些重要的信息。
解决方法三：使用flex布局
还有一种解决方法是使用CSS的flex布局。通过将容器设置为flex布局，并使用flex-grow属性来撑开内容，可以避免垂直滚动条的出现。例如：
body {
height: 100vh;
display: flex;
flex-direction: column;
}
.container {
flex-grow: 1;
}
这样，容器会自动根据视口高度调整自身的高度，从而避免垂直滚动条的出现。
示例说明
下面是一个示例，展示了如何使用解决方法一来避免垂直滚动条的出现。
<!DOCTYPE html>
<html>
<head>
<style>
.header {
height: 50px;
background-color: #f1f1f1;
}
.container {
height: calc(100vh - 50px);
background-color: #e1e1e1;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="container">Container</div>
</body>
</html>
在上面的示例中，我们有一个固定高度的头部导航栏（.header），并希望容器（.container）撑满整个屏幕。通过使用解决方法一，我们减去头部导航栏的高度来计算容器的高度，并成功避免了垂直滚动条的出现。
总结
本文介绍了当使用“height: 100vh”为容器设置高度时，垂直滚动条出现的原因，并提供了三种解决方法。通过调整其他内容的高度、使用overflow属性以及使用flex布局，我们可以避免垂直滚动条的出现，使容器自适应屏幕高度。根据具体情况选择合适的解决方法，可以提升用户体验，确保页面内容的完整展示。
此处评论已关闭