<aside>的背景在我的网站上有一个灰色的背景。当我从移动设备访问网站并按下菜单按钮时，菜单背景显示正常，但当我向下滚动页面时，背景仅部分刷新，大约下半部分保持透明。
注意:该站点使用 bigcartel，因此我正在编辑的代码与从实时站点读取的代码不完全匹配。
我遵循了 Praveen 在评论中留下的指示:
Remove the
height: 100%fromaside {}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。以下是我添加到样式表末尾的附加类:
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>延伸到页面底部。从窄浏览器查看时，某些结果成功，但我无法找到从移动设备查看时成功的任何解决方案。我一直在使用阿尔卡特 One Touch Pop 以及 Chrome 的移动查看器进行测试。这些都不能以纵向正确显示，但横向 View 显示没有错误。
最佳答案
我不得不从 .aside 中删除 height: 100% 属性并将其替换为 min-height: 100%;。最初这并没有解决问题。
我还必须从 .wrapper 中删除 height: 100%;。包装器还附加了 min-height: 100%; 属性，我没有删除它。看来问题已经解决了。
关于html - 在移动网站上滚动时不会加载背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34458045/