CSS 溢出（滚动）- 100％容器高度

在本文中，我们将介绍CSS中的溢出（滚动）属性，并探讨如何将容器的高度设置为100％。

阅读更多：CSS 教程

什么是溢出（scroll）属性？

CSS中的溢出属性（overflow）用于控制当内容超出其父容器时的表现方式。这个属性有几个值可供选择，包括：

visible：默认值，不会裁切内容，可以显示在父容器之外；
hidden：剪切内容，隐藏在父容器之外的部分；
scroll：显示滚动条，当内容超出父容器时，用户可以滚动查看所有内容；
auto：根据需要显示滚动条，如果内容没有超出父容器，则不会显示滚动条。在某些浏览器中，auto值会根据可用空间自动调整，因此可能会出现滚动条，即使内容没有超出父容器。

本文主要关注溢出属性的scroll值。

使用scroll值创建一个具有100%容器高度的溢出滚动

有时我们希望在网页中的容器内显示一段长内容，同时保持容器的高度不变，而是显示一个滚动条以查看整个内容。这就需要将容器高度设置为100%并使用scroll值。

首先，我们需要创建一个HTML文件，如下所示：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  height: 100%;
  overflow: scroll;
}
</style>
</head>
<body>
<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in turpis at diam blandit dignissim. Nulla hendrerit gravida malesuada. Etiam fermentum euismod lorem, non pretium tellus ullamcorper sed. Suspendisse potenti.</p>
  <p>Phasellus porttitor lacus vitae ex mattis, ac dapibus ipsum lobortis. Nulla malesuada commodo velit vitae luctus. Sed a varius turpis. Nulla ullamcorper nisi id ultricies pretium.</p>
  <p>In hac habitasse platea dictumst. Etiam maximus fermentum feugiat. Aliquam sed urna nec velit dictum hendrerit. Morbi at eros et lacus viverra rutrum.</p>
  <p>Sed viverra, felis in porttitor fermentum, lorem nisi aliquet elit, at egestas tellus arcu nec velit. Sed varius purus placerat elit fringilla finibus.</p>
  <p>Nullam bibendum ante libero, ut interdum lacus lobortis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  <p>Proin quis interdum odio. Nunc fringilla varius mi sed fringilla. Nullam auctor diam magna, in maximus orci bibendum sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
  <p>Aliquam erat volutpat. Vestibulum tempor sollicitudin risus ut laoreet. Nulla facilisi. In laoreet felis sit amet magna tempus, cursus tristique diam volutpat.</p>
  <p>Sed ac sem auctor, tempus sem sed, finibus quam. Nunc bibendum efficitur lacus a dapibus. Suspendisse potenti. Ut posuere ullamcorper orci eget pulvinar.</p>
  <p>Phasellus sagittis enim odio, ac mollis dui auctor ut. Maecenas eu suscipit turpis. Suspendisse ac est sed metus sollicitudin fermentum at at felis.</p>
  <p>Mauris bibendum suscipit lorem at mattis. Nulla ac tristique nulla. Proin dapibus mollis orci vel convallis. Quisque euismod, lorem id rhoncus volutpat, lorem ipsum mollis arcu, nec ultrices tortor elit a dolor.</p>
</div>
</body>
</html>

在上面的示例中，我们创建了一个容器并将其类名命名为“container”。然后，我们将container类的高度设置为100％并使用溢出属性overflow的scroll值。在容器内，我们添加了一些段落作为内容示例。

当我们在浏览器中打开该HTML文件时，将看到一个具有固定高度的容器，其中显示有滚动条，以便查看全部内容。如果内容超出容器范围，用户可以滚动滚动条以浏览其余的内容。

解释和注意事项

容器的父元素必须有一个高度（可以是固定像素值或百分比值），因为容器高度为100％时，它将参照其父元素的高度；
如果父元素没有明确设置高度，那么容器的高度将无法确定，无法正确显示滚动条；
如果父元素的布局是基于弹性盒子（flexbox），那么height:100%与其它CSS属性可能会有一些复杂的行为，具体取决于浏览器的实现；
如果内容没有超出容器的高度，将不会显示滚动条（故而不会产生滚动效果）；
在某些浏览器中，滚动条的样式可以通过CSS的::-webkit-scrollbar伪类来自定义。

总结

在本文中，我们了解了CSS中溢出（滚动）属性的使用，并展示了如何将容器的高度设置为100％以创建一个具有滚动条的溢出内容。通过使用scroll值，我们可以确保长内容不会撑破容器，而是展示一个可滚动的视图，以查看整个内容。记住在父容器设置高度，并注意一些与布局相关的注意事项，以获得预期的滚动效果。