宽 position:fixed 元素不会留在可滚动容器内

Question

我有一个非常大的 table，当您向下滚动页面时，position:fixed header 会停留在页面顶部。

我一直在尝试通过将 table 放入宽度为 overflow:auto 的 reasonably-sized 容器中来增强这一点，但固定容器延伸到 div 之外。

这是一个简化的 JS fiddle

Answer 1

溢出问题源于您为 header 元素固定的位置属性，此外，容器上的水平滚动（除非有意）应该通过添加 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;
}

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

宽 position:fixed 元素不会留在可滚动容器内

A wide position:fixed element won't stay inside scrollable container

html

css

css-position

overflow