CSS 如何使一个 div 垂直滚动

在本文中，我们将介绍如何使用CSS使一个div元素垂直滚动。垂直滚动在网页设计中非常常见，特别是在有大量内容需要展示的情况下。通过使用CSS属性和一些简单的样式规则，我们可以轻松地实现一个垂直滚动的div。

阅读更多：CSS 教程

创建一个可滚动的div

要创建一个垂直滚动的div，我们首先需要创建一个具有固定高度的容器，然后在容器内部放置内容。以下是一个示例的HTML结构：

<div class="scrollable-container">
  <div class="scrollable-content">
    <!-- 内容放在这里 -->
  </div>
</div>

在上面的代码中，我们创建了一个具有类名为”scrollable-container”的外部容器，并在其内部创建了一个类名为”scrollable-content”的div元素用于放置滚动内容。

应用样式

要使div垂直滚动，我们需要应用一些必要的CSS样式。以下是一个示例的CSS代码：

.scrollable-container {
  height: 300px; /* 设置固定的高度 */
  overflow-y: scroll; /* 启用垂直滚动 */
}

.scrollable-content {
  padding: 10px; /* 可选的边距样式 */
}

在上述代码中，我们为”scrollable-container”容器设置了一个固定的高度（300px），这是容器的可见高度。我们还使用”overflow-y”属性将垂直滚动启用。通过这些设置，当容器内的内容超过容器的高度时，就会显示一个垂直滚动条。

我们还可以为”scrollable-content”元素应用一些可选的样式，如padding。这样可以在内容和容器之间添加一些间距以提升视觉效果。

示例

下面是一个使用上述代码创建的简单示例。请注意，当你在浏览器中查看示例时，如果内容超过容器的高度，你将看到一个垂直滚动条，你可以通过滚动鼠标滚轮或拖动滚动条来滚动内容。

<!DOCTYPE html>
<html>
<head>
  <style>
    .scrollable-container {
      height: 300px;
      overflow-y: scroll;
    }

    .scrollable-content {
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="scrollable-container">
    <div class="scrollable-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis felis non erat aliquet, non tempor ligula posuere. Sed eu ante id metus pulvinar vulputate. Fusce facilisis turpis at tincidunt sagittis. Pellentesque aliquam, erat vel efficitur eleifend, urna enim lacinia diam, et vulputate velit ipsum et turpis. Sed et eros id tellus posuere egestas. Pellentesque nec sem non lectus elementum sagittis. Nulla facilisi.</p>
      <p>Maecenas faucibus, magna faucibus malesuada varius, ex odio rhoncus diam, at facilisis odio mauris sed risus. Vivamus in elit id purus tincidunt sodales sed id ex. Phasellus gravida iaculis fringilla. Nullam mollis augue eget diam venenatis egestas quis eget dui. Fusce iaculis, ligula vitae hendrerit eleifend, enim ligula vulputate est, non faucibus ex sem ac velit. Ut convallis sem arcu, ut ultrices felis ultricies id. Donec rhoncus, urna non elementum auctor, ante orci ultrices purus, et imperdiet velit lectus eu orci. Proin tincidunt tempus mi, et eleifend nisi malesuada vel.</p>
      <p>Sed quis tincidunt tellus. Ut ullamcorper porttitor blandit. In hac habitasse platea dictumst. Aliquam vulputate non urna at vehicula. Maecenas dolor orci, sagittis sed ex sed, vestibulum rutrum lorem. Aenean vitae ligula auctor, facilisis dui sit amet, aliquam neque. Donec id augue odio. Suspendisse iaculis dolor et risus interdum, sit amet accumsan dolor posuere. Vestibulum sed interdum sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <!-- 更多内容 -->
    </div>
  </div>
</body>
</html>