宽位置：固定元素不会停留在可滚动容器内

Question

我有一个非常大的表格，带有一个position:fixed标题，当您向下滚动页面时，该表头会停留在页面顶部。

我一直试图通过将表放在一个合理宽度的容器中来增强这一点，overflow:auto但固定容器延伸到div 之外。

这是一个简化的JS小提琴

Answer 1

溢出

的问题源于标题元素的位置固定属性，此外，容器上的水平滚动（除非有意）应通过将 overflow-x： 隐藏属性添加到容器元素来修复。

.container {
    width: 400px;
    height: 400px;
    background: #ccc;
    overflow-x: hidden;
}
.header {
    width: 600px;
    height: 100px;
    background: #ddd;
}
.content {
    width: 600px;
    height: 600px;
    background: #eee;
}

如果这不是您要找的答案，请告诉我，我们可以进一步讨论。