CSS height: 100vh 和在较小屏幕上的overflow “content”

在本文中，我们将介绍CSS中的height: 100vh属性以及在较小屏幕上使用overflow “content”的相关内容。

阅读更多：CSS 教程

CSS height: 100vh

在CSS中，height: 100vh是一个非常有用的属性，它用于设置元素的高度等于视口的高度。vh是一个相对单位，它表示视口高度的百分比。而视口指的是用户正在浏览的网页区域。

使用height: 100vh可以确保一个元素的高度始终占据整个视口的高度，不受其它元素的影响。这在创建全屏幕的背景、滚动效果等方面特别有用。

例如，我们可以使用以下CSS代码来创建一个全屏背景效果：

html, body {
  height: 100%;
  margin: 0;
}

.container {
  height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  color: #333;
}

在上面的例子中，我们首先设置了html和body元素的高度为100%，以确保容器元素正确地占据整个视口的高度。然后，我们对.container元素应用了height: 100vh，使其高度等于视口的高度。接下来，我们仅仅是为了演示将容器内的文本内容居中显示。你可以根据需要改变.container的背景颜色、添加图片等等。

在较小屏幕上的overflow “content”

有时候，当在较小的屏幕上显示大量内容时，我们希望用户可以通过滚动查看全部内容。这时候，可以使用overflow属性来实现。

overflow属性用于控制元素在内容溢出时的行为。默认值是visible，表示内容不限制，并且可以溢出元素框。但在某些情况下，我们希望内容在元素框内显示，并提供滚动条供用户查看。

我们可以使用overflow: auto或overflow: scroll来实现内容溢出时的滚动效果。auto将只在内容溢出时显示滚动条，而scroll将始终显示滚动条，即使内容未溢出。

下面是一个简单的示例，演示如何在较小屏幕上使用overflow “content”来实现滚动效果：

<div class="container">
  <h2>在较小屏幕上的溢出内容</h2>
  <div class="overflow-content">
    <!-- 这里是大量内容 -->
  </div>
</div>

.container {
  width: 100%;
  height: 100vh;
  overflow: auto;
}

.overflow-content {
  width: 100%;
  height: auto;
  max-height: 100%;
  overflow: scroll;
}

在上面的示例中，我们首先将.container元素的宽度设置为100%、高度设置为100vh，并将overflow属性设置为auto。这样，在内容溢出时，会自动显示滚动条供用户查看。

接下来，我们在.container元素内创建一个.div，将其宽度设置为100%，高度设置为auto，并设置max-height为100%。然后，我们将overflow属性设置为scroll，明确告诉浏览器始终显示滚动条。

这样，当.container内容超出视口高度时，用户可以通过滚动查看所有内容。