仅在移动视图上显示网站底部的灰色条

Question

我在我的网站(www.brentleas.com)上设置了一个背景，在桌面上它会填满屏幕，但在手机上它不会，当我在chrome上使用开发工具时，它会显示充满屏幕的图像。然而，当我在手机上加载网站时，它在页面底部有一个灰色条。

显示我正在谈论的内容的图像：1

下面是我的css代码：

html {

background-image: url("../images/cooper.png");

background-repeat: no-repeat;

background-position: center center;

background-attachment: fixed;

background-size: cover;

background-color: #464646;

color: white; }

任何帮助都将不胜感激。提前谢谢。

Answer 1

我猜min-height: 100%;应该能做到这点

Answer 2

像这样使用js，并根据视口大小调整它：

//ON LOAD INITIALLY ASSUME PHONE
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
doc.getElementsByTagName("body")[0].style.padding = "2px";
var mainItems = doc.getElementsByClassName("main-item");
for (var i = 0; i < mainItems.length; i++) {
    mainItems[i].classList.add("full-width");
}
doc.getElementsByTagName("main")[0].classList.add("column");
// doc.getElementById("title-right").style.display = "none";
if (width >= 840) {
    //IT'S A DESKTOP
    doc.getElementsByTagName("body")[0].style.padding = "24px";
    for (var i = 0; i < mainItems.length; i++) {
        mainItems[i].classList.remove("full-width");
    }
    doc.getElementsByTagName("main")[0].classList.remove("column");
    // doc.getElementById("title").style.display = "none";
    // doc.getElementById("title-right").style.display = "flex";
}
else if (width >= 480) {
    //IT'S A TABLET
    // doc.getElementById("title").style.display = "flex";
    doc.getElementsByTagName("body")[0].style.padding = "24px";
    for (var i = 0; i < mainItems.length; i++) {
        mainItems[i].classList.remove("full-width");
    }
    doc.getElementsByTagName("main")[0].classList.remove("column");
}
//ON RESIZE INITIALLY ASSUME PHONE
window.addEventListener("resize", resizeThrottler, false);
var resizeTimeout;
function actualResizeHandler() {
    // assuming device is a phone
    doc.getElementsByTagName("body")[0].style.padding = "2px";
    for (var i = 0; i < mainItems.length; i++) {
        mainItems[i].classList.add("full-width");
    }
    doc.getElementsByTagName("main")[0].classList.add("column");
    // doc.getElementById("title").style.display = "flex";
    // doc.getElementById("title-right").style.display = "none";
    if (window.innerWidth >= 840) {
        //device is a desktop
        doc.getElementsByTagName("body")[0].style.padding = "24px";
        for (var i = 0; i < mainItems.length; i++) {
            mainItems[i].classList.remove("full-width");
        }
        doc.getElementsByTagName("main")[0].classList.remove("column");
        // doc.getElementById("title").style.display = "none";
        // doc.getElementById("title-right").style.display = "flex";
    }
    else if (window.innerWidth >= 480) {
        //device is a tablet
        doc.getElementByTagName("body")[0].style.padding = "24px";
        for (var i = 0; i < mainItems.length; i++) {
            mainItems[i].classList.remove("full-width");
        }
        doc.getElementsByTagName("main")[0].classList.remove("column");
        // doc.getElementById("title").style.display = "none";
        // doc.getElementById("title-right").style.display = "flex";
    }
}
function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if (!resizeTimeout) {
        resizeTimeout = setTimeout(function() {
            resizeTimeout = null;
            actualResizeHandler();
            // The actualResizeHandler will execute at a rate of 15fps
        }, 66);
    }
}

Answer 3

我清理了手机上的缓存。现在，灰色条消失了。