如何为sticky定位元素设置高度？解决sticky元素height属性不生效问题

我一眼就看出来问题出在哪了——你的绿色.btn作为Flex容器里的子元素，默认的Flex属性和Sticky定位的特性冲突了，导致你设置的height:50px直接被浏览器忽略了。

快速修复方案 #

只需要给.btn添加两个关键属性就行，修改后的完整代码如下：

.container {
  background: red;
  display: flex;
  flex-direction: column;
  height: 30vh;
  width: 150px;
  overflow: auto;
  /* position: fixed; */
}
.btn {
  background: green;
  position: sticky;
  height: 50px; /* 现在这个样式会正常生效了！ */
  bottom: 0;
  left: 0;
  right: 0;
  flex-shrink: 0; /* 禁止Flex布局压缩该元素 */
  align-self: stretch; /* 确保按钮宽度撑满容器（可选，按需调整） */
}

<div class='container'>
  <div class='items'>
    <div>hello world </div>
    <div>hello world </div>
    <div>hello world </div>
    <div>hello world </div>
    <div>hello world </div>
    <div>hello world </div>
    <div>hello world </div>
    <div>hello world </div>
    <div>hello world </div>
    <div>hello world </div>
    <div>hello world </div>
    <div>hello world </div>
  </div>
  <button class='btn'>+</button>
</div>

问题根源解析 #

• Flex默认的压缩行为：你的.container是flex-direction: column的Flex容器，所有子元素默认带有flex-shrink: 1属性——这意味着当容器空间不足时，子元素会被自动压缩尺寸。你给容器设置了固定的height:30vh，当内容溢出需要滚动时，浏览器就会优先压缩按钮的高度，完全无视你设置的height值。flex-shrink: 0就是明确告诉浏览器：这个元素不能被压缩，必须保持我设置的尺寸。
• Sticky定位的布局特性：在Flex布局环境下，Sticky元素的尺寸计算逻辑会有特殊表现，显式设置align-self: stretch可以确保按钮的宽度撑满容器（如果你想要按钮宽度自适应，也可以改成align-self: flex-start等其他值）。

另外，你也可以用min-height:50px替代height:50px来达到类似效果，但flex-shrink:0是更彻底的解决方式，从根源上避免了Flex布局对元素尺寸的干扰。

替换完代码后，你的绿色按钮就能稳稳保持50px的高度啦！

内容的提问来源于stack exchange，提问作者Amin Sanei