CSS div内容超出自动添加滚动条|极客笔记

CSS div内容超出自动添加滚动条

在网页开发中，经常会遇到内容较长的 div 元素，为了保持页面的整洁和美观，我们希望超出 div 的内容能够自动添加滚动条以便用户查看。

本文将详细介绍如何使用 CSS 来实现 div 内容超出自动添加滚动条的效果，并给出相应的示例代码和代码运行结果。

1. CSS `overflow` 属性

在 CSS 中，我们可以使用 overflow 属性来定义元素的内容溢出时的处理方式。overflow 属性有以下几个可用的值：

visible（默认值）：内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，超出元素框的部分将被隐藏。
scroll：内容会被修剪，同时为元素添加垂直和水平滚动条。
auto：由浏览器决定是否添加滚动条。

2. 使用 `overflow: auto` 添加滚动条

要实现 div 内容超出自动添加滚动条的效果，我们可以将 overflow 属性设置为 auto。接下来，我们通过示例代码来演示具体实现过程。

<!DOCTYPE html>
<html>
<head>
  <style>
  .scrollable-div {
    width: 300px;
    height: 150px;
    overflow: auto;
    border: 1px solid black;
  }
  </style>
</head>
<body>
  <div class="scrollable-div">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend sem non ante aliquam iaculis. Praesent non lectus cursus, venenatis lacus a, tempus urna. Nullam et est elit. Maecenas consectetur mauris elit, id tempor leo eleifend fermentum. Nulla ultrices scelerisque neque, sed varius lacus aliquet a. Aenean cursus erat ut pretium feugiat. Morbi viverra sem suscipit, semper augue vitae, fermentum turpis. Phasellus efficitur tristique sem, a vestibulum mauris pharetra in. Nam eget nunc id risus convallis accumsan.
    </p>
  </div>
</body>
</html>

上面的代码中，我们首先定义了一个名为 scrollable-div 的 div 元素。通过设置宽度和高度，我们限制了 div 元素的尺寸，并通过 border 属性添加了一个边框。

接着，我们使用 overflow: auto 将 scrollable-div 的 overflow 属性设置为 auto。这样当 div 内容超出限定的尺寸时，浏览器会自动添加滚动条。

在上面的示例代码中，我们在 div 元素中添加了一个 p 元素，并在其中填充了一段长文本。你可以自行修改文本的长度，来观察滚动条的效果。

运行上述代码，你将会看到，当文本超出 div 的高度或宽度时，浏览器会自动添加相应的垂直或水平滚动条。用户可以通过滚动条来查看超出的内容，从而保持页面的整洁和美观。

3. 使用 `overflow-x` 和 `overflow-y` 分别控制水平和垂直滚动条

除了使用 overflow: auto 来同时添加水平和垂直滚动条外，我们也可以使用 overflow-x 和 overflow-y 分别控制水平和垂直滚动条。这样，我们可以根据实际需求来决定是否添加水平或垂直滚动条。

接下来，我们通过示例代码来演示如何分别控制水平和垂直滚动条。

<!DOCTYPE html>
<html>
<head>
  <style>
  .scrollable-div {
    width: 300px;
    height: 150px;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid black;
  }
  </style>
</head>
<body>
  <div class="scrollable-div">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend sem non ante aliquam iaculis. Praesent non lectus cursus, venenatis lacus a, tempus urna. Nullam et est elit. Maecenas consectetur mauris elit, id tempor leo eleifend fermentum. Nulla ultrices scelerisque neque, sed varius lacus aliquet a. Aenean cursus erat ut pretium feugiat. Morbi viverra sem suscipit, semper augue vitae, fermentum turpis. Phasellus efficitur tristique sem, a vestibulum mauris pharetra in. Nam eget nunc id risus convallis accumsan.
    </p>
  </div>
</body>
</html>

在上述代码中，我们使用了 overflow-x 和 overflow-y 分别控制 scrollable-div 元素的水平和垂直滚动条。将它们设置为 auto，当内容超出限定的尺寸时，浏览器会自动添加相应的滚动条。

运行上述代码，你会发现与之前示例相比，现在同时出现了水平和垂直滚动条，用户可以根据需要分别滚动。这样可以更好地控制页面的布局和外观，提供更好的用户体验。