“background-size：cover”不覆盖移动屏幕 [英] "background-size: cover" does not cover mobile screen

问题描述

我在我的网站上有一张照片背景，使用 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 uls.

我通过删除<$ 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”不覆盖移动屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！