- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我已尝试在此处查找此主题,但没有一个答案能解决我的具体问题。
问题是这样的:每次我访问我的网站的移动版本时,我第一次向下滚动到页面的最底部,没关系,我的背景图片填满了整个屏幕。但是然后我向上滚动并向下滚动,然后页脚下方突然出现一个白色条。我已经在 CSS 和 HTML 中尝试了很多东西,但到目前为止没有任何效果。
同样,这个问题不会发生在我的桌面版本中,只会在我第二次向下滚动时出现在移动版本上。
这是我当前的 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>
这是我的问题的图片:
没有空格:
带空格:
非常感谢任何帮助。谢谢!
最佳答案
显然这是一个旧的 Chrome 和 Android 错误。有几种方法可以尝试“避免”该错误。最简单的是在 CSS 的开头添加以下代码:
html {
min-height: 100vh;
}
您仍会看到白色条,但它会在几秒钟后消失。此错误与浏览器渲染以及地址栏有关。
这是一篇 Google 帖子,解释了更多内容并讲述了解决该问题的其他方法:https://developers.google.com/web/updates/2016/12/url-bar-resizing
关于html - 无法摆脱我的移动版网站底部的空白区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47372718/
我正在寻找 css 属性以隐藏带或不带 css 类的段落,如果它包含空格 ( ) 或空白,但我想至少保留一个带或不带的段落,如果有更多的话。 隐藏段落,如果它是空白的或包含 white-space(
在 ruby 中对空白有不同的敏感度/设置吗? 我有一个 RoR 项目,其中一个事件记录调用有很多组件: max_stuff = FooSummary.select("max(stuff)
如何在脚注中的数字后留空? 一般来说,对于所有脚注! 例子: 好 : 1 Hello World 坏:1Hello World 最佳答案 正确答案是不要重新定义\thefootnote ,因为这会在脚
我有这段代码,每次第一个 for 循环再次开始时,我希望它将数组重置为空白,因为它正在使用新用户,但我得到的输出包含一个数组中的所有值。 var items = []; for (var i
我试图在CakePHP中生成一个动态xml文档,以输出到浏览器。 这是我的 Controller 代码: Configure::write ('debug', 0); $this->layout =
当我尝试在 nxos 设备上运行某些命令时,输出末尾有一个空格。我必须将输出与现有变量列表进行比较。末尾的空格导致比较错误。如何在字符串列表中使用 .strip() 函数? - name: Curre
我对 Elasticsearch 相当陌生,我一直在尝试对我的数据进行搜索,并且总是让点击部分为空。即使在数据上传和索引之后也会发生这种情况。我的映射如下: { "mappings":{
我想将about:blank页面更改为firefox插件首页页面的url。 如何更改默认的新标签页网址或可以为新标签页提供默认网址? 我正在使用Firefox附加SDK。 最佳答案 您可以结合使用Ta
我正在使用 R 并具有以下数据框示例,其中所有变量都是因子: first second third social birth control high
如何清空显示对话框的页面。下面是我的代码HTML: .ui-dialog, .ui-dialog-content { border:1px solid #cde68c; border-botto
更新“他的问题是要求我只运行一次 str ,他们已经告诉我该函数只需要一个参数)” 我试图返回第一个不重复的字符,例如:“blazqnqbla”->第一个不重复的字符是“z”,因此函数需要返回z。现在
我的登录验证有问题。问题是当我尝试使用管理员登录时,页面停止在 checklogin.php 上并且不会告诉它是否成功。这是我的代码。 索引.html Aplik
我的查询是这样的 SELECT Distinct tm.teamid,tm.Team_Name,CONCAT_WS(' ',tu.FirstName+' '+tu.LastName) as Leade
我正在创建指向页面的超链接 url 由用户输入决定,因此由查询字符串决定 ; 问题是变量状态由两个或多个单词组成。因此,当我尝试单击证明表单中输入的超链接时,仅获取状态变量的第一个单词。浏览器将另一个
该问题在每个浏览器中的表现都不同,例如在 Firefox 中大约一个空格如果您再次滚动到顶部,则会出现具有相同高度的滚动框。在 chrome 中,滚动时框会变得狭窄等等...... 使用的调用是:
我对菜单栏文字之间的 CSS 空白有疑问。我尝试了很多方法,但仍然无法解决。有人可以帮我吗? 菜单问题图片如下: http://imageshack.us/photo/my-images/201/44
我对 有疑问.其中的插入符根据是否为空具有不同的垂直位置: 我的代码: textarea { padding: 0 5px; border: none; outline: n
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Ignore whitespace in HTML 我想在网页上将图片并排放置。这是我的 HTML:
每当我尝试检查元素时,什么都没有出现。我在使用 Chrome。我明白了 Elements | Network | Sources | Timeline | Profiles | Resources |
我在使用 Chrome、Firefox 和 IE 时遇到了一个奇怪的问题。我正在为我的投资组合网站/博客构建一个 WordPress 主题,一切都很好,直到今天,当我在 chrome 中查看该网站时,
我是一名优秀的程序员,十分优秀!