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

Question

当您向下滚动页面时，我有一个非常大的表格，其中position:fixed标题位于页面顶部。

我一直在尝试通过将表放在一个合理大小的宽度容器overflow:auto内来增强它，但固定容器延伸到div之外。

这是一个简化的JS fiddle

Answer 1

溢出的问题源于header元素的position固定属性，而且容器上的水平滚动（除非有意）应该通过将overflow-x：hidden属性添加到容器元素来修复。

.container {
    width: 400px;
    height: 400px;
    background: #ccc;
    overflow-x: hidden;
}

.header {
    width: 600px;
    height: 100px;
    background: #ddd;
}

.content {
    width: 600px;
    height: 600px;
    background: #eee;
}

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