Sticky Header滚动消失问题：保留footer固定的解决方法咨询

直接把html, body的height: 100%替换为min-height: 100%即可，这样既能保留flexbox实现的底部固定footer，又能让sticky header正常工作。

修改后的CSS代码： #

html,
body {
  min-height: 100%; /* 替换原来的height:100% */
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 0%;
}

header {
  position: sticky;
  top: 0;
  background: white; /* 建议添加背景色，避免滚动时被内容覆盖 */
}   

原理说明： #

• 原来的height:100%会把body高度固定在视口高度，当内容超出时，滚动发生在body内部，但sticky元素是相对于最近的可滚动祖先生效，此时body作为flex容器高度被限制，导致header无法在滚动时保持粘性。
• 使用min-height:100%后，body的高度至少是视口高度，当内容超过视口时，body会自动扩展高度，滚动发生在整个文档上，header的sticky定位就能基于视口正常工作，同时flex:1的main区域仍会自动填充空间，让footer固定在页面底部。

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