Question

解决！感谢@Shomz

通过向html和body添加100％的高度来解决。

html, body, #background {
height: 100%;
}

原始问题

所以我有一个div包含background-image，但是图片却没有覆盖屏幕的底部，它似乎总是跟随另一个div的高度，这里＆＃39 ; s是我的问题的图像（颜色代码：白色= div class="content"，黑色= div id="background"，蓝色= div id="background"应涵盖的内容。）

enter image description here

这就是我想在图像上面看起来像

enter image description here

另外，对不起，如果听起来令人困惑，我匆匆忙忙！这是源代码;

HTML;

<!DOCTYPE html>
<html>
<head>
<title>PROJECT_SPACE</title>
<!--add the styling-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!--change background script-->
<script>
    $(switchBackground);
    var oFReader = new FileReader(),
        rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

    oFReader.onload = function(oFREvent) {
        localStorage.setItem('b', oFREvent.target.result);
        switchBackground();
    };

    function switchBackground() {

      var backgroundImage = localStorage.getItem('b');
  if (backgroundImage) {
    $('#background').css('background-image', 'url(' + backgroundImage + ')');    
  } 
        else {
            $('#background').css('background-image', 'url("img/grass_side.png")');
        }
    }

    function loadImageFile(testEl) {
      if (! testEl.files.length) { return; }
      var oFile = testEl.files[0];
      if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
      oFReader.readAsDataURL(oFile);
    }

function removeImageFile() 
{
    localStorage.removeItem('b');
    switchBackground();
    location.reload();
}
</script>
</head>
<body>

<!--navigation-->
        <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Skins</a></li>
        <li><a href="#">Packs</a></li>
        <li><a href="#">Servers</a></li>
        <li><a href="#">Forums</a></li>
        </ul>
    <!--end navigation-->
    <div id="background">

        <div class="content">

                <input id="test" type="file" onchange="loadImageFile(this)" />
                <button type="button" onclick="removeImageFile()">Clear background</button>
        </div>

    </div>


</body>
</html>

CSS：

body{
    background-color: #82b2ff;
}
.logo {
    width: 50px;
    height: 50px;
    background-color: #000;
}
/*fonts*/
 @font-face { font-family: cool; src: url('../fonts/coolvetica.ttf'); } 
 /*background*/
 #background {
    height: 100%;
 }
/*content -- where all site content will go */
.content {

    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: 700px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
/*navigation*/
.nav{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    margin-top: 150px;
    padding:0;
    text-align:center;
    list-style: none;
    background-image: url('../img/sandstone_smooth.png');
    background-repeat: repeat;
    font-family: cool;
}
.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
    padding:10px;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    letter-spacing: 4px;
}
.nav a:hover {
    color: #E0E0E0;
}

/*links*/
a:link {
    color: #fff;
}

/* visited link */
a:visited {
    color: #fff;
}

/* mouse over link */
a:hover {
    color: #fff;
}

/* selected link */
a:active {
    color: #fff;
}

Answer 1

以下规则应修正您的背景：

html, body, #background {
    height: 100%;
}

Answer 2

根据您在上面显示的屏幕布局，我很想简单地声明body background-color:黑色：

body {
background-color: rgba(0,0,0,1);
}

如果需要，您还可以.nav一个padding-top:和（可能）一个position: absolute;。

在我看来，这是在上面重现所需屏幕布局的最简单方法。

你认为这对你有用吗？

Div背景图像保持与另一个Div相同的高度

解决！感谢@Shomz

原始问题

2 个答案: