Question

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

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

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

从height: 100%行号中删除aside {}。在theme.css中的757

结果是页面停止尝试刷新背景，并且当页面滚动时，它填充的区域保持固定。

以下是<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。以下是我在样式表末尾添加的附加类：

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推荐的解决方案。但是，从height: 100%;容器中删除<aside>并未提供解决方案。

当页面加载时，背景颜色将填充原本在网站上可见的区域，但是当滚动时，背景颜色不会重新出现，页面也不会尝试刷新它以便容器的哪个部分屏幕外加载是透明的。

然后我尝试用height: 100%替换min-height: 100%，它似乎有效。现在，当我在移动网站上向下滚动页面时，除了页面高度超过<html>之外，背景颜色将无缝填充。

编辑：

我已经清理了代码。试图将<cite>推到底部。尝试改变容器的边距和填充。试图改变引用的边距和填充以强制<aside>扩展到页面底部。从狭窄的浏览器查看时，某些结果成功，但我无法找到任何从移动设备查看时成功的解决方案。我一直在测试使用Alcatel One Touch Pop以及Chrome的移动查看器。这些都不能以纵向显示，但横向视图不会显示错误。

Answer 1

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

我还必须从height: 100%;中移除.wrapper。包装器还附加了min-height: 100%;属性，我没有删除。它似乎解决了这个问题。

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

1 个答案: