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

【问题标题】：Background image not 100% height when scrolling down page向下滚动页面时背景图像不是 100% 高度
【发布时间】：2018-01-27 08:16:08
【问题描述】：

我的包装器 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;
}

【问题讨论】：

你也可以发布 HTML 吗？

标签： html css background-image

【解决方案1】：

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

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

【讨论】：