CSS中 position: sticky 元素设置最大高度并启用滚动-html教程-PHP中文网

CSS中 position: sticky 元素设置最大高度并启用滚动

碧海醫心

发布： 2025-08-08 20:04:01

原创

284人浏览过

css中 position: sticky 元素设置最大高度并启用滚动

本文旨在解决如何在使用 position: sticky 定位的元素上设置最大高度，并当内容超出该高度时启用滚动条的问题。通过使用 max-height 属性结合 overflow-y: auto，可以实现固定定位元素在达到指定高度后，内部内容可以滚动的效果，确保页面布局的灵活性和可读性。

在网页设计中，position: sticky 属性允许元素在滚动到特定位置时“粘”在屏幕上，从而提供更好的用户体验。然而，当粘性元素的内容过多时，可能会占据整个屏幕，影响其他元素的显示。为了解决这个问题，我们需要限制粘性元素的最大高度，并在内容超出限制时启用垂直滚动条。

解决方案

核心在于使用 max-height 属性来限制元素的高度，并结合 overflow-y: auto 属性来启用垂直滚动条。

立即学习“前端免费学习笔记（深入）”；

具体步骤如下：

设置 position: sticky 和 top 属性: 首先，确保要固定定位的元素具有 position: sticky 属性，并设置 top 属性来指定元素应该在距离视口顶部多远的位置开始固定。
设置 max-height 属性: 使用 max-height 属性来限制元素的最大高度。可以使用像素值 (px)，百分比 (%)，或者视口高度单位 (vh)。使用视口高度单位 (vh) 通常是最佳选择，因为它允许元素的高度相对于视口大小进行缩放。
设置 overflow-y: auto 属性: overflow-y: auto 属性允许浏览器在元素内容超出其高度时自动添加垂直滚动条。

示例代码

以下是一个示例，展示如何将最大高度设置为视口高度的 60%，并在内容超出时启用滚动条：

.stickyContainer {
    position: sticky;
    top: 0;
    background: lightgreen;
    max-height: 60vh;
    overflow-y: auto;
}

登录后复制

在这个例子中，.stickyContainer 元素将被固定在视口顶部，最大高度为视口高度的 60%。如果内容超过这个高度，将会出现垂直滚动条。

完整示例:

<!DOCTYPE html>
<html>
<head>
<style>
.mainContainer {
    display: flex;
    flex-direction: column;
    padding: 0 1rem 0 1rem;
}

.stickyContainer {
    position: sticky;
    top: 0;
    background: lightgreen;
    max-height: 60vh;
    overflow-y: auto;
}

.scrollable {
    max-width: 100%;
}
</style>
</head>
<body>

<div class="mainContainer">
  <div class="stickyContainer">
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
    <p>sticky container</p>
  </div>

  <div class="scrollable">
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
    <p>scrollable content</p>
  </div>
</div>

</body>
</html>

登录后复制

注意事项