已解决!感谢@Shomz
通过给 html 和 body 添加 100% 高度来解决。
html, body, #background {
height: 100%;
}
原始问题
所以我有一个包含 background-image 的 div，但是图像没有覆盖屏幕底部，它似乎总是跟随另一个 的高度code>div，这是我的问题的图片(颜色代码:WHITE = div class="content",BLACK = div id="background", BLUE=div id="background" 应该覆盖什么。)
这就是我想要上图的样子
另外，抱歉，如果这听起来很困惑，我很着急!这是源代码；
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;
}
最佳答案
以下规则应修复您的背景:
html, body, #background {
height: 100%;
}
关于html - Div Background-image 保持与另一个 Div 相同的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28257921/