如何实现动态高度Header不水平滚动、垂直可正常滚动？

可以通过**position: sticky + left: 0 + width: 100vw**实现需求，无需JavaScript，同时满足Header动态高度、水平不滚动、垂直可滚动的要求，页面水平滚动条始终在底部。

核心思路 #

1. 用width: 100vw替代width: 100%：100%是相对于被超宽内容撑开的文档整体宽度，而100vw是严格的视口宽度，确保Header始终和视口同宽。
2. position: sticky + left: 0：水平滚动时，Header固定在视口左侧，不随页面水平移动；垂直方向保持默认的top: auto，可正常滚出视口。
3. box-sizing: border-box：避免padding撑开Header宽度，确保它刚好适配视口。

完整代码 #

CSS #

* {
  margin: 0;
  padding: 0;
}
header {
  padding: 32px;
  background: gray;
  width: 100vw;
  position: sticky;
  left: 0;
  box-sizing: border-box;
}
main {
  border: 2px solid lime;
  min-width: 100%;
}
div {
  height: 200px;
  width: 120%; /* 保持超宽以触发水平滚动 */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid red;
  box-sizing: border-box;
}

HTML #

<header>The Header should not scroll horizntally<br>(is dynamic height)</header>
<main>
  <div>content 1</div>
  <div>content 2</div>
  <div>content 3</div>
  <div>content 4</div>
  <div>content 5</div>
  <div>content 6</div>
</main>

效果验证 #

• 水平滚动页面：Header保持视口宽度，固定在左侧不跟随滚动。
• 垂直滚动页面：Header可正常滚出视口，高度自适应内部内容。
• 水平滚动条显示在页面底部，操作便捷。

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