问题描述
我在我的网站上有一张照片背景,使用 background-size:cover
。它在大部分工作,但在我的银河S3在肖像模式留下一个奇怪的〜30px的空白。
I have a photo background on my site using background-size:cover
. It works for the most part but leaves a weird ~30px white space on my Galaxy S3 in portrait mode.
我附加了一个截图。 1px的蓝绿色线是说明整个屏幕。似乎背景停在社交媒体 ul
之后。
I've attached a screenshot. The 1px teal line is to illustrate the entire screen. Seems like the background stops right after the social media ul
s.
我通过删除<$ c
.stack.imgur.com / EaCEZ.pngalt =问题截图>
此外,这里是我的CSS移动portait视图:
Also, here's my CSS pertaining mobile portait view:
@media only screen and (max-width: 480px) {
.logo {
position: relative;
background-size:70%;
-webkit-background-size: 70%;
-moz-background-size: 70%;
-o-background-size: 70%;
margin-top: 30px;
}
h1 {
margin-top: -25px;
font-size: 21px;
line-height: 21px;
margin-bottom: 15px;
}
h2 {
font-size: 35px;
line-height: 35px;
}
.footer_mobile {
display: block;
margin-top: 20px;
margin-bottom: 0px;
}
li {
display: block;
font-size: 1.3em;
}
这是不会发生的,但我想我在试图解决另一个问题。
This used to not happen, but I guess I accidentally bugged it while trying to solve another issue.
推荐答案
尝试不同的事情后,添加 min-height:100%
下方的
html
底部 {background:...}
。
After hours of trying different things, adding
min-height: 100%;
to the bottom of html
under the { background:... }
worked for me.
这篇关于“background-size:cover”不覆盖移动屏幕的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!