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

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

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