html - 如何修复CSS渐变背景在移动浏览器的底部留下空白

Question

我想在移动设备上修复 CSS 渐变背景。

现在，在移动设备上，当用户放大页面并向下滚动时，他会看到 css 渐变结束，然后看到空白。缩小后空白区域仍然存在。看到这张图片

放大/缩小或滚动似乎不会导致桌面出现问题

该页面目前位于http://beta.qalamproject.com/

我尝试过在正文选择器中包含背景 css 而不是 html，但似乎无法弄清楚导致问题的原因。

* {
  margin: 0;
  padding: 0;
  /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
}

html {
  margin: 0;
  background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(226,240,254,1) 0%, rgba(255,247,228,1) 90% );
  background-attachment: fixed;
  background-size: auto 100%;
    background-repeat: no-repeat;
  height: 100%;
}

body {
  font-family:'Open Sans', sans-serif;
  margin: 10em 1em 0em 1em;
  text-align: center;
}

我希望背景渐变填充整个页面，无论用户如何缩放、滚动等。相反，现在背景结束并且用户看到白色。

标签： htmlcssgradient

Answer 1

尝试将背景大小设置为封面

html {
    margin: 0;
    background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(226,240,254,1) 0%, rgba(255,247,228,1) 90% );
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
}