无法摆脱我的移动版本网站底部的空白 [英] Can't get rid of white space at bottom of my mobile version of website

问题描述

我尝试在此处查找此主题，没有任何答案可以回答我的特定问题.

I've tried looking up this topic on here, none of the answers answered my specific problem.

问题是这样的:每次我进入网站的移动版本时，我都会第一次向下滚动到页面的最底部，这很好，我的背景图像充满了整个屏幕.但是然后我向上滚动并向下滚动，页脚下方突然出现一个白色条.我已经在CSS和HTML中尝试了很多东西，但到目前为止没有任何效果.

The problem is this: Every time I go to the mobile version of my site, I scroll down the first time to the very bottom of my page and it's fine, my background image fills the entire screen. But then I scroll back up and scroll back down and there's suddenly a white bar below my footer. I've tried numerous things in CSS and HTML and nothing has worked so far.

同样，此问题在我的台式机版本中不会发生，仅在我向下滚动第二次时在移动版本中才会发生.

Again, this problem does not happen in my desktop version and only happens on the mobile version the 2nd time I scroll down.

这是我当前的CSS和HTML代码:

This is my current code for CSS and HTML:

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;
}

<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>

这是我的问题的照片:

没有空格:

带有空格:

任何帮助，不胜感激.谢谢！

Any help much appreciated. Thanks!

推荐答案

显然这是一个古老的Chrome和Android错误.有几种方法可以尝试避免"该错误.最简单的方法是在CSS的开头添加以下代码:

Apparently this is an old Chrome and Android bug. There are several ways to try to "avoid" the bug. The simplest is to add the following code at the beginning of your CSS:

  html {
   min-height: 100vh;
 }

您仍然会看到白色的条，但几秒钟后它将消失.该错误与浏览器的渲染以及地址栏有关.

You will still see the white bar, but it will disappear a few seconds later. This bug is related to browser rendering along with the address bar.

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

Here is a Google post explaining a little more and speaking some other ways to get around the problem: https://developers.google.com/web/updates/2016/12/url-bar-resizing

这篇关于无法摆脱我的移动版本网站底部的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！