2017-11-19 24 views
0

ここでこのトピックを参照しようとしましたが、私の特定の問題に答えた回答はありません。私のモバイル版ウェブサイトの下部に空白を取り除くことはできません

私のサイトのモバイル版に行くたびに、私はページの一番下までスクロールして、大丈夫です。私の背景イメージは画面全体を満たしています。しかし、その後私はスクロールアップしてスクロールダウンして、突然私のフッタの下に白いバーがあります。私はCSSとHTMLで数多くのことを試してきましたが、これまでに何も働いていませんでした。

また、この問題はデスクトップバージョンでは発生せず、2回目にスクロールするとモバイル版でのみ発生します。

これは、CSSや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>

は私の問題の写真は以下のとおりです。スペースなしで

No White Space

空白で

White Space

感謝すべてのヘルプ。ありがとう!

+0

が絶対的に正常に見える – Comunit3

+0

:ここ

は、Googleのポストはもう少し説明すると、問題を回避するには、いくつかの他の方法を話していますアドレスバーに関連しています。最初の写真ではアドレスバーが見えます。 2番目にはそうではなく、底の白いスペースは欠けているバーと同じ高さに見えます。 – wazz

+0

@ Comunit3、これは今私のWebアドレスです - http://213.167.240.251/ – mfierro31

答えて

0

明らかにこれは古いChromeとAndroidのバグです。 バグを回避する方法はいくつかあります。最も簡単なのは、あなたのCSSの先頭に次のコードを追加することです:

html { 
    min-height: 100vh; 
} 

あなたはまだ白いバーが表示されますが、それは数秒後に消えます。このバグは、アドレスバーと共にブラウザのレンダリングに関連しています。あなたはそれをホストし、このためのリンクを共有し、私はコードペンでこれをテストしたhttps://developers.google.com/web/updates/2016/12/url-bar-resizing

+0

ああ、そうです!あなたは天才です!ありがとうございました! :Dええ、私はその記事を読んで、それは基本的にちょうどポジションをとっていると言いました。 CSSで、それは動作しませんでした。しかし、ありがとう、ありがとう、ありがとう!私は今のように、この問題に立ち往生している2日!ハハ。 – mfierro31

関連する問題