CSS 100% 高度的 div 和 overflow:auto

在本文中，我们将介绍如何使用 CSS 实现一个具有 100% 高度的 div，并使用 overflow:auto 属性来实现滚动条的效果。

阅读更多：CSS 教程

100% 高度的 div

在 CSS 中，想要实现一个 div 的高度自适应父容器的高度，并且撑满整个屏幕，我们可以通过以下步骤来实现：

首先，我们需要确保 html 和 body 元素的高度设置为 100%，以确保整个页面能够撑满屏幕。可以通过以下 CSS 代码来实现：

html, body {
  height: 100%;
}

然后，我们需要将 body 元素的内边距和外边距设置为 0，以避免出现不必要的间距。可以通过以下 CSS 代码来实现：

body {
  margin: 0;
  padding: 0;
}

接下来，我们可以创建一个 div 元素，并为其设置高度为 100%。通过以下 CSS 代码来实现：

.my-div {
  height: 100%;
}

最后，我们需要确保父容器的高度也为 100%，以使 div 能够撑满整个屏幕。通过以下 CSS 代码来实现：

.parent-container {
  height: 100%;
}

通过以上步骤，我们就可以实现一个具有 100% 高度的 div，并且能够撑满整个屏幕。

overflow:auto 属性

当一个 div 元素的内容超过其容器的高度时，如果不进行任何处理，内容将会溢出并被隐藏。然而，我们可以使用 overflow 属性来控制溢出内容的显示方式。

在 CSS 中，overflow 属性有以下几个取值：

visible：默认取值，溢出的内容会被显示在容器之外。
hidden：溢出的内容会被隐藏，并且不可见。
scroll：无论是否有溢出内容，容器都会显示滚动条。
auto：如果有溢出内容，容器会显示滚动条；如果没有溢出内容，则不显示滚动条。

示例代码如下：

.my-div {
  overflow: auto;
}

通过为 div 元素添加 overflow:auto 属性，当内容溢出时，滚动条会自动出现，用户可以通过滚动条来查看全部内容。

示例说明

以下是一个示例代码，用于演示如何实现一个具有 100% 高度的 div，并使用 overflow:auto 属性来实现滚动条的效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .parent-container {
      height: 100%;
    }

    .my-div {
      height: 100%;
      overflow: auto;
      padding: 20px;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div class="parent-container">
    <div class="my-div">
      <h1>这是一个具有100%高度的div</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius eleifend orci, sit amet tincidunt velit laoreet nec. Mauris vel ultricies elit. Mauris id blandit enim, et commodo leo. Nulla facilisi. Pellentesque pharetra ex at lectus venenatis, nec interdum libero pharetra. Vivamus et arcu efficitur, viverra augue in, egestas eros. Suspendisse pulvinar venenatis sollicitudin. In mattis mi ut ligula placerat, ut ornare sem scelerisque. Morbi eget eros sit amet nunc eleifend venenatis nec in dolor. Morbi et consequat ipsum. Donec a sodales lacus, et tristique diam. Curabitur fermentum vel nisi a vehicula.</p>
      <p>In vitae nulla nisi. Aenean quis metus ac erat vehicula iaculis sed id ligula. Integer vel mi consequat, ullamcorper lectus ac, vestibulum velit. In id gravida so eleifend orci, sit amet tincidunt velit laoreet nec. Mauris vel ultricies elit. Mauris id.</p>
      <p>这是一个有滚动条的div元素。</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius eleifend orci, sit amet tincidunt velit laoreet nec. Mauris vel ultricies elit. Mauris id blandit enim, et commodo leo. Nulla facilisi. Pellentesque pharetra ex at lectus venenatis, nec interdum libero pharetra. Vivamus et arcu efficitur, viverra augue in, egestas eros. Suspendisse pulvinar venenatis sollicitudin. In mattis mi ut ligula placerat, ut ornare sem scelerisque. Morbi eget eros sit amet nunc eleifend venenatis nec in dolor. Morbi et consequat ipsum. Donec a sodales lacus, et tristique diam. Curabitur fermentum vel nisi a vehicula.</p>
      <p>In vitae nulla nisi. Aenean quis metus ac erat vehicula iaculis sed id ligula. Integer vel mi consequat, ullamcorper lectus ac, vestibulum velit. In id gravida so eleifend orci, sit amet tincidunt velit laoreet nec. Mauris vel ultricies elit. Mauris id.</p>
      <p>这是一个有滚动条的div元素。</p>
    </div>
  </div>
</body>
</html>

在上述示例中，我们创建了一个具有 100% 高度的 div，并使用了 overflow:auto 属性来实现滚动条的效果。可以通过在 div 元素中添加大量内容来测试滚动条的出现情况。