首页 > 文章 > 前端

CSS固定头部与max-height实用技巧

时间：2025-08-15 11:57:25 325浏览收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《CSS固定头部与max-height控制技巧》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

CSS Sticky 定位与 Max-height 限制：实现固定头部并控制高度

本文旨在解决在使用 CSS position: sticky 属性时，如何同时限制其最大高度并启用滚动条的问题。通过结合 max-height 和 overflow-y: auto 属性，可以创建一个固定在页面顶部，并在内容超出指定高度时显示滚动条的元素，从而确保页面布局的合理性和可读性。

理解 Sticky 定位和高度限制

position: sticky 是一种混合了 relative 和 fixed 定位的属性。元素在滚动到特定阈值之前表现为 relative，之后则表现为 fixed，从而实现“粘性”效果。max-height 属性用于设置元素的最大高度，而 overflow-y: auto 则在内容超出该高度时显示垂直滚动条。

使用 vh 单位设置 Max-height

问题在于，直接使用百分比（如 60%）设置 max-height 时，其计算基于父元素的高度。如果父元素没有显式的高度设置，或者高度是动态变化的，sticky 元素的高度可能无法正确限制，导致其占据整个屏幕。

解决方法是使用 vh 单位，它是相对于视口高度的单位。1vh 等于视口高度的 1%。因此，max-height: 60vh 将 sticky 元素的最大高度设置为视口高度的 60%。

以下是修改后的 CSS 代码：

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

这段代码会将 .stickyContainer 元素固定在页面顶部，并将其最大高度限制为视口高度的 60%。如果内容超出该高度，则会出现垂直滚动条。

完整示例

下面是一个完整的示例，展示了如何使用 vh 单位来限制 sticky 元素的高度：

<!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>
    <p>scrollable content</p>
  </div>
</div>

</body>
</html>

注意事项

确保父元素有足够的空间容纳 sticky 元素，否则可能无法正常工作。
sticky 元素的 top、right、bottom 或 left 属性必须设置一个非 auto 的值，才能触发其粘性行为。
sticky 定位在某些旧版本的浏览器中可能不被支持，需要进行兼容性处理。

总结

通过结合 position: sticky、max-height 和 overflow-y: auto 属性，并使用 vh 单位设置最大高度，可以有效地创建一个固定头部并限制其高度的元素，从而提升用户体验。在实际应用中，请根据具体需求调整 max-height 的值，并注意兼容性问题。

到这里，我们也就讲完了《CSS固定头部与max-height实用技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！