html - 向下滚动页面时背景图像不是 100% 高度

Question

我的包装器 div 包含一个背景图片，理想情况下它的高度和宽度应为 100%。由于某种原因，在屏幕的初始尺寸之后，向下滚动页面时，该高度之后的任何内容都会变成空白。

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    max-width: 100%;
    overflow-x:hidden;
    text-align: center;
    font-family: 'Roboto' , sans-serif;
}

.wrapper{
    background-image: url('./images/background.jpg');
    background-size: cover;
    position: relative;
    min-width: 100%;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    overflow: visible;
}

Answer 1

我想您的问题是由 height: 100%; 和 overflow: visible; 的组合引起的:您正在将高度固定为 100%(min- height: 100% 在这种情况下不会做任何事情)，但溢出的内容仍然可见，但不是你所说的“初始高度”的一部分。

作为解决方案，您可以保留 height: 100%; 删除 min-height: 100%; 并更改 overflow: visible;到 overflow: auto;。