无法删除我移动版网站

Question

我在这里尝试查找这个主题，没有一个答案回答了我的具体问题。

问题是这样的：每次我访问我的网站的移动版本时，我第一次向下滚动到我的页面底部并且它很好，我的背景图像填满整个屏幕。但后来我向后滚动并向后滚动，突然在我的页脚下面有一个白色条。我在CSS和HTML中尝试了很多东西，到目前为止还没有任何工作。

同样，这个问题在我的桌面版本中不会发生，只会在第二次向下滚动时在移动版本上发生。

这是我目前的CSS和HTML代码：

＆＃13;

＆＃13;

html,
body {
  background-image: url("https://i.pinimg.com/736x/46/c0/ab/46c0ab66409097e235b0\
93c469834848--ancient-egypt.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

body,
main {
  display: flex;
}

body {
  flex-direction: column;
}

main {
  flex-direction: row;
  flex: auto;
}

article {
  flex: 2;
}

aside {
  flex: 1;
}

article,
aside {
  overflow-y: auto;
}

h1,
h2,
h3,
p {
  color: yellow;
}

a {
  color: yellow;
}

#header a,
#footer a {
  color: yellow;
}

#header a:hover,
#footer a:hover,
a:hover {
  color: white;
}

＆＃13;

<link href="https://www.holbertonschool.com/level2/holberton.css" rel="stylesheet">

<div id="header">
  <header>
    <ul>
      <li><a href="http://213.167.240.251/tweets.html">Ancient Egyptian Tweets</a></li>
      <li><a href="http://213.167.240.251/mummy.html">The Mummy</a></li>
      <li><a href="http://213.167.240.251/learn.html">Learn Hieroglyphics</a></li>
    </ul>
  </header>
</div>
<main>
  <article>
    <h1>The Ancient Egyptian Book of the Dead</h1>
    <h2>A Journey into the Afterlife</h2>
    <h3>By Mike Fierro (and the Ancient Egyptians, of course)</h3>
    <a href="https://www.youtube.com/watch?v=aPOFE-ZrqJg">
      <img src="http://www.crystalinks.com/papyrusofani.jpg">
    </a>
    <p>The Ancient Egyptian Book of the Dead: an ominous-sounding name for something so fascinating and yet, good. For the ancient egyptians, the Book of the Dead was not something to be feared, but cherished, and wanted. It contained spells, magic, and
      tips for getting around and staying safe in the afterlife.</p>

    <p>The ancient egyptian afterlife was something to be feared. In the picture shown above, the heart of the deceased is being weighed against the Maat, which is the Feather of Truth. If the heart outweighed the Feather of Truth, that meant the deceased
      had a heavy heart, filled with bad deeds and other shameful acts. At that point, the deceased's heart/soul was then thrown to the rather frightening monster on the right side of the picture, Ammit, who was part hippo, part lion, and part crocodile.
      Ammit would devour their soul and the deceased would have ceased to exist, which was more terrifying to the ancient egyptians than hell.</p>

    <p>However, if the deceased's heart weighed equal to, or lighter than the feather, then the deceased was granted a place in the Fields of Hetep and Iaru, their heaven. The god Horus would lead them to the great god Osiris, god of the Underworld, and
      Osiris would grant them their place in heaven for all eternity.</p>

    <p>Simply having this part of the Book of the Dead buried with you when you died would have pretty much guaranteed your entrance into heaven because the ancient egyptians believed in the power of illustrations and writings. They believed the illustrations
      would come to life in the afterlife, and so, if you had an illustration of your soul being successfully weighed against Maat, then they believed that that would, in fact, come true.</p>

    <p>Care to take a look at some of my juvenile ancient Egyptian-related tweets? Click <a href="http://213.167.240.251/tweets.html">here!</a></p>
  </article>
  <aside>
    <p>Placeholder to add comment thread later.</p>
  </aside>
</main>
<div id="footer">
  <footer>
    <p>Made by <a href="https://twitter.com/@RackRiderMike" target="_blank">Mike Fierro</a> for <a href="https://www.holbertonschool.com" target="_blank">Holberton Scho\
ol</a>.</p>
  </footer>
</div>

＆＃13;

＆＃13;

＆＃13;

以下是我的问题的图片：

没有空格：

使用空格：

任何帮助非常感谢。谢谢！

Answer 1

显然这是一个旧的Chrome和Android错误。 有几种方法可以避免＆＃34;避免＆＃34;错误。最简单的是在CSS的开头添加以下代码：

  html {
   min-height: 100vh;
 }

你仍会看到白色条，但几秒后它会消失。此错误与浏览器呈现以及地址栏有关。

以下是一篇Google帖子，解释了更多内容，并介绍了解决问题的其他方法：https://developers.google.com/web/updates/2016/12/url-bar-resizing