粘在没有滚动的页面上

【问题标题】：Sticky on a page without scroll粘在没有滚动的页面上
【发布时间】：2020-04-27 09:45:14
【问题描述】：

没有滚动的页面怎么会有一个元素粘在具有overflow-y: scroll的div的顶部？

示例：

你可以看到有一个表格的 div 有 overflow-y: 滚动。现在我想让表头粘在父 div 的顶部。这甚至可能吗？还要记住，div 也可能有overflow-x。

希望你能帮助我！谢谢。

【问题讨论】：

见：css-tricks.com/position-sticky-and-table-headers
不幸的是，如果页面没有滚动条，该示例将不起作用。它需要击中视口，在我的情况下不会发生。只有表格 div 有滚动，而不是页面本身

标签： html css sass

【解决方案1】：

position: sticky; top: 0;

这将有助于将表头固定在溢出容器内。例如：

`<div class="table-container" style="overflow-y: scroll;">
    <div class="table-header style="position: sticky; top: 0;"></div>
    <div class="table-body"></div>
</div>
`

【讨论】：

它不起作用，因为position: sticky 需要元素点击视口，在这种情况下，这不会发生，因为页面本身没有滚动条。只有表格 div 有滚动
这不是我们想要的结果吗？ codepen.io/jungmoney/pen/MWYGyOR
是的，我的错。我没有完成您使用 codepen 所做的结果，所以这就是我这么说的原因。感谢您的帮助伙伴：D