如何使用 CSS 在没有内容的情况下使 div 垂直滚动？

在某些情况下，我们需要使一个没有内容的 div，在里面显示一些占位符，并且可以进行垂直滚动。这时，我们可以使用 CSS 实现该效果。以下是具体实现：

HTML 代码

首先，在 HTML 中，我们需要以下代码表示这个空 div：

<div id="my-empty-div"></div>

CSS 代码

接下来，使用以下 CSS 代码即可在空 div 中实现垂直滚动：

#my-empty-div {
  height: 300px; /* 设置 div 的高度，可以按需修改 */
  overflow-y: scroll; /* 设置垂直滚动 */
}

#my-empty-div::before {
  content: ""; /* 设置伪元素的内容为空，表示该元素是空的 */
  display: inline-block; /* 设置伪元素为内联元素，以便占用空间 */
  height: 100%; /* 设置伪元素的高度为 100% */
  vertical-align: middle; /* 使用 vertical-align 居中 */
}

#my-empty-div::after {
  content: ""; /* 同上 */
  display: inline-block;
  height: 100%;
}

以上代码使用了伪元素 ::before 和 ::after 来作为占位符，并使用 vertical-align 属性使其居中。

结论

以上即为使用 CSS 在没有内容的情况下使 div 垂直滚动的方法。该方法可以应用于占位符、空白页等场景。