如何不使用JavaScript计算粘性表格表头的CSS `top` 值

问题 #

我想移除粘性表格表头里的top:50px样式，这个50px是粘性操作栏的高度。虽然能用JS计算操作栏高度再通过框架应用到内联CSS里，但我更想只用CSS动态计算这个值，不想写死50px。我知道可以用CSS变量固定50px，但还是希望能根据内容动态获取高度，请问可行吗？

需求场景：当大表格开始垂直滚动、其他内容消失时，表格表头要定位在操作栏下方。

原代码示例 #

CSS

body {
  margin: 0px;
  padding: 0px;
}

#container {
  display: inline-block;
  min-height: 100vh;
}

#first_bar {
  position: sticky;
  left: 0px;
  width: 100vw;
  background: red;
}

#second_bar {
  position: sticky;
  top: 0px;
  left: 0px;
  height: 50px;
  width: 100vw;
  background: blue;
}

#other_content {
  background: grey;
}

#table_header {
  position: sticky;
  width: 200vw;
  top: 50px;
  background: yellow;
}

#large_table {
  width: 200vw;
  height: 200vw;
  background: green;
}

HTML

<div id="container">
  <div id="first_bar">navigation</div>
  <div id="second_bar">action bar</div>
  <div id="other_content">other content</div>
  <div id="table_header">table header</div>
  <div id="large_table">table</div>
</div>

解决方案 #

完全可行，不用JS也能实现动态适配操作栏高度的粘性表头，核心思路是利用嵌套粘性定位：

1. 新增一个父容器包裹操作栏（#second_bar）和表格表头（#table_header），给这个容器设置position: sticky; top: 0，让它固定在视口顶部。
2. 移除操作栏自身的position: sticky和top:0，让它作为父容器内的普通块级元素。
3. 给表格表头设置position: sticky; top: 100%，这样它会相对于父容器的顶部偏移100%的高度，刚好卡在操作栏的下方，而且会自动适配操作栏的动态高度。

修改后的完整代码 #

CSS

body {
  margin: 0;
  padding: 0;
}

#container {
  display: inline-block;
  min-height: 100vh;
}

#first_bar {
  position: sticky;
  left: 0;
  width: 100vw;
  background: red;
}

/* 新增的粘性容器 */
#sticky_wrapper {
  position: sticky;
  top: 0;
  width: 100vw;
}

#second_bar {
  /* 移除原有的sticky定位 */
  left: 0;
  height: 50px; /* 这里高度可以随便改，表头都会自动适配 */
  width: 100vw;
  background: blue;
}

#other_content {
  background: grey;
}

#table_header {
  position: sticky;
  width: 200vw;
  top: 100%; /* 关键：相对于父容器顶部偏移100% */
  background: yellow;
}

#large_table {
  width: 200vw;
  height: 200vw;
  background: green;
}

HTML

<div id="container">
  <div id="first_bar">navigation</div>
  <!-- 用新容器包裹操作栏和表头 -->
  <div id="sticky_wrapper">
    <div id="second_bar">action bar</div>
    <div id="table_header">table header</div>
  </div>
  <div id="other_content">other content</div>
  <div id="large_table">table</div>
</div>

原理说明 #

• 父容器#sticky_wrapper固定在视口顶部后，内部的操作栏会正常占据自身高度。
• 表格表头的top:100%是相对于父容器的高度计算的，不管操作栏的高度是固定值还是动态变化（比如内容撑开高度），表头都会自动定位到操作栏的正下方，完全不需要硬写数值。

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