在移动网站上滚动时不会加载背景

Question

我网站上 <aside> 的背景是灰色的。当我从移动设备访问该站点并按下菜单按钮时，菜单背景显示正常，但当我向下滚动页面时，背景仅部分刷新，大约下半部分保持透明。

注意：该站点使用 bigcartel，因此我正在编辑的代码与从实时站点读取的代码不完全匹配。

我遵循了 Praveen 在评论中留下的指示：

Remove the height: 100% from aside {} Line no. 757 in theme.css

结果是页面停止尝试刷新背景，它填充的区域在页面滚动时保持不变。

这是 <aside> 的 CSS。

aside {
  background-color: {{ theme.sidebar_color }};
  float: left;
  padding: 57px 30px 0;
  position: {% if theme.fixed_sidebar %} fixed {% else %} absolute {% endif %};
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
  transform: translateZ(0);
  width: 209px;
  z-index: 100;
}
@media screen and (max-width: 765px) {
  aside {
    border-right-color: {{ theme.sidebar_border_color }};
    border-right-style: solid;
    border-right-width: 1px;
    min-height: 100%;
    padding: 0 32px;
    position: absolute;
    width: 272px;
    z-index: 1;
  }
}

模板中已有 CSS。以下是我添加到样式表末尾的附加 class：

aside {
    -webkit-box-shadow: 0 0 24px 3px rgba(255,255,255,0.6), inset -7px 9px 20px -7px rgba(0,0,0,1);
    -moz-box-shadow: 0 0 24px 3px rgba(255,255,255,0.6), inset -7px 9px 20px -7px rgba(0,0,0,1);
  box-shadow: 0 0 24px 3px rgba(255,255,255,0.6), inset -7px 9px 20px -7px rgba(0,0,0,1);
}

我添加了显示更新结果的屏幕截图。

编辑：

我尝试了Praveen在评论中推荐的解决方案。但是，从 <aside> 容器中删除 height: 100%; 并没有提供解决方案。

背景颜色会填充页面加载时最初在网站上可见的区域，但是当滚动时，背景颜色不会重新出现并且页面不会尝试刷新它，所以这部分屏幕外加载的容器是透明的。

然后我尝试用 min-height: 100% 替换 height: 100% 并且它似乎有效。现在，当我在移动网站上向下滚动页面时，除了页面高度超过 <html>.

的地方外，背景颜色会被无缝填充

编辑：

我已经清理了代码。试图将 <cite> 推到底部。尝试更改容器的边距和填充。试图改变引用的边距和填充以强制 <aside> 扩展到页面底部。从窄浏览器查看时，某些结果成功，但我无法找到从移动设备查看时成功的任何解决方案。我一直在使用阿尔卡特 One Touch Pop 以及 Chrome 的移动查看器进行测试。 None 其中纵向显示正确，但横向显示没有错误。

Answer 1

我不得不从 .aside 中删除 height: 100% 属性并将其替换为 min-height: 100%;。最初这并没有解决问题。

我还必须从 .wrapper 中删除 height: 100%;。包装器还附加了 min-height: 100%; 属性，我没有删除它。看来问题已经解决了。

在移动网站上滚动时不会加载背景

Aside background won't load when scrolling on mobile site

html

css

containers

background

fill