如何实现header div与content div同宽？支持横向同步滚动纵向固定

完全可以不用JS或表格，纯CSS就能搞定，逻辑清晰还贴合你的所有要求。核心思路是把header和content放到同一个横向滚动容器里，让它们共享滚动上下文，同时给header加上粘性定位实现纵向固定。

具体实现步骤 #

• 给header和content套一个父容器（比如命名为.scroll-container），设置overflow-x: auto，这个容器会自动根据内部content的宽度生成横向滚动条，header也会自动继承容器的宽度（也就是content撑开的宽度）。
• 给header设置position: sticky; top: 0，让纵向滚动时header固定在视口顶部，不会跟着content向下滚动。
• 不需要给header手动设置宽度，它会自动匹配父容器的宽度（也就是content的实际宽度）。

修改后的完整代码 #

<html>
<head>
<style>
body { margin: 0; }
/* 新增的滚动容器，统一管理横向滚动 */
.scroll-container {
  overflow-x: auto;
}
.header {
  background-color: red;
  height: 50px;
  /* 粘性定位，纵向滚动时固定在顶部 */
  position: sticky;
  top: 0;
  /* 确保header始终在content上方 */
  z-index: 1;
}
.content {
  /* 用fit-content让宽度由子元素撑开，贴合你的实际场景 */
  width: fit-content;
}
/* 模拟content的子元素，用来撑开宽度（替换成你实际的子元素即可） */
.content .child-item {
  width: 1200px;
  height: 250px;
  background-color: blue;
  display: inline-block;
}
</style>
</head>
<body>
<div class="scroll-container">
  <div class="header"></div>
  <div class="content">
    <div class="child-item"></div>
    <div class="child-item"></div>
  </div>
</div>
</body>
</html>

方案优势说明 #

1. 宽度自动匹配：.scroll-container的宽度由内部content的子元素撑开，header作为容器的直接子元素，默认会占满容器宽度，自然和content保持一致。
2. 横向滚动同步：header和content在同一个滚动容器内，横向滚动时两者会同步移动，完美满足“header对应下方内容标题”的需求。
3. 纵向固定不冲突：position: sticky让header在纵向滚动时固定在顶部，同时完全不影响横向滚动的同步性，逻辑简洁无冗余。

这个方案完全符合你的要求：无JS、无表格，纯CSS实现，还容易维护扩展。

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