📅 最后修改于: 2023-12-03 15:07:27.021000 🧑 作者: Mango
在 Web 开发中，经常需要展示较长的内容，为此可使用可滚动的 div 进行展示。滚动的 div 会在展示过程中，使得内容框始终保持一个特定的大小，具体展示的内容可以通过滚动来查看。在进行长内容展示时，这是一个非常实用的功能。
要创建可滚动的 div，只需要给 div 添加一个固定的高度，并在 CSS 中将 overflow 属性设置为 auto 或 scroll 即可。具体样式如下：
.scrollable {
width: 500px;
height: 300px;
overflow: auto;
}
然后在 HTML 中使用如下代码：
<div class="scrollable">
<!-- 需要滚动的内容放这里 -->
</div>
以下是一个简单的 HTML 页面展示了使用可滚动的 div 的效果：
<!DOCTYPE html>
<html>
<head>
<title>可滚动的 div 示例</title>
<style>
.scrollable {
width: 200px;
height: 100px;
overflow: auto;
border: 1px solid #ddd;
padding: 10px;
}
</style>
</head>
<body>
<h1>可滚动的 div 示例</h1>
<div class="scrollable">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit libero id velit placerat luctus. Maecenas posuere felis sed purus tincidunt, quis pretium orci volutpat. Vivamus vel dolor ac quam condimentum suscipit.</p>
<p>Curabitur sit amet magna scelerisque, bibendum metus eu, bibendum orci. Sed vel lectus odio. Cras at malesuada nisl, quis vulputate nisl. Phasellus malesuada lacus ligula, eget aliquam purus commodo sit amet.</p>
<p>Donec blandit lacus justo, at dignissim nunc viverra a. Phasellus placerat nunc ut arcu posuere vulputate. Morbi ut tellus ac lectus vehicula imperdiet. In elementum, neque id aliquam placerat, est elit eleifend turpis, et dapibus eros risus non lectus.</p>
<p>Nulla in turpis eget elit hendrerit tristique. Donec molestie nulla vel consequat sodales. Quisque venenatis consequat turpis ac malesuada. Pellentesque vel urna sed tellus aliquam semper sit amet in nisl.</p>
<p>Phasellus posuere quis nunc vel vestibulum. Nulla facilisi. Aenean ullamcorper, justo vel volutpat dignissim, quam ligula sollicitudin nunc, quis malesuada sem ante eget arcu. Nunc turpis nisi, eleifend tincidunt massa sit amet, gravida cursus nisi.</p>
</div>
</body>
</html>
可滚动的 div 是一个非常实用的功能，它可以帮助我们在进行长内容展示时，保持内容框的大小不变。希望以上介绍能够对初学者有所帮助。