如何保持一列固定无滚动和另一个正常滚动?



我有两个div并排在我的网站。我想让其中一个div固定,没有滚动,另一个正常,有滚动。怎么做呢?为了更好地理解,这里有一张图片。样品图片

您可以使用引导溢出类。

文档在这里:https://getbootstrap.com/docs/5.0/utilities/overflow/

<div class="overflow-auto">...</div>

示例:https://jsfiddle.net/kzh9bp24/9/

这是纯css的实现方式

要做到这一点,你必须确保你添加了max-heightoverflow-y: auto到你的div。

.scrollDiv{
max-height: 100px;
max-width: 400px;

overflow-y: auto;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div class="scrollDiv">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae molestie eros. Vestibulum id elementum leo, eu venenatis felis. Nam vitae nisi dignissim, pellentesque purus ut, mattis sem. Duis vestibulum, sem pellentesque pharetra interdum, turpis ex aliquam augue, quis ornare tortor felis eu turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae lorem sodales, blandit mi vitae, sollicitudin mauris. Praesent a ex et leo commodo tincidunt ut id mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer maximus tortor ante, vel posuere tortor tristique quis.
</p>
</div>
</body>
</html>

最新更新