CSS sticky设置不生效：两列布局短列如何自动填满可用高度

问题根因 #

position: sticky 元素的粘性生效范围严格限制在它的直接父元素的高度范围内。你当前用浮动实现的两列布局不会自动等高，右列#column2的高度仅等于自身内容高度，所以sticky头部滑到右列内容底部时，就会随着父元素一起滚出屏幕，无法跟随更长的左列保持吸顶。

解决方案 #

将外层容器改成Flex布局即可，Flex默认开启子元素等高拉伸特性，无需显式指定任何高度就可以让右列高度自动对齐更高的左列高度，完全符合你的要求。
你的HTML结构不需要做任何修改，仅调整CSS样式即可：

/* 给外层容器新增Flex布局配置 */
#container {
  display: flex;
}

#column1 {
  width: 20%;
}
#column2 {
  width: 80%;
}
/* 删掉原来给两列设置的float、display: inline-block属性，Flex布局下不需要 */

#column2-head {
  top: 0;
  position: sticky;
  background-color: yellow;
}

修改后#column2的高度会自动和更长的左列保持一致，#column2-head的粘性生效范围就覆盖了整个左列的滚动周期，会一直保持吸顶直到左列内容完全滚动结束。

内容的提问来源于stack exchange，提问作者Tibor Nagy