Html 如何在图片中保留背景的同时将内容div推送到页脚div
我已经有这个问题好几个星期了，现在在不同的网站上搜索，却没有找到解决问题的方法。我浏览了stackoverflow这个网站，发现答案并不完全是我想要的。我最终使用了47种媒体，效果非常好。问题在于屏幕大小和div的高度。如果页面很长，它看起来非常漂亮。但是，当contentdiv与屏幕大小相比缺少内容时，页面的内容和页脚之间会出现空白。当您放大或缩小页面时，您将看到问题所在 如何使content div扩展到页脚，使我的背景保持在整个div中 我制作了虚拟代码来模拟我的网站。图像可以被任何东西代替，这样你就可以看到我在说什么。背景必须相当大。索引和另一个页面是具有不同内容的两个虚拟页面 下面是HTMLHtml 如何在图片中保留背景的同时将内容div推送到页脚div,html,css,background,footer,absolute,Html,Css,Background,Footer,Absolute,我已经有这个问题好几个星期了，现在在不同的网站上搜索，却没有找到解决问题的方法。我浏览了stackoverflow这个网站，发现答案并不完全是我想要的。我最终使用了47种媒体，效果非常好。问题在于屏幕大小和div的高度。如果页面很长，它看起来非常漂亮。但是，当contentdiv与屏幕大小相比缺少内容时，页面的内容和页脚之间会出现空白。当您放大或缩小页面时，您将看到问题所在 如何使content div扩展到页脚，使我的背景保持在整个div中 我制作了虚拟代码来模拟我的网站。图像可以被任何东西代
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dummy page</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container" class="neo-sans-text">
<div id="header" class="container-center">
<a href="../home.html"><img class="hcenter" src="../images/dummy-logo.gif" alt="Waves" /></a>
</div><!-- end header-->
<div id="background-container" style=background-image:url("../images/background/Big_wave.jpg")>
<div id="nav">
<ul>
<div class="link-box">
<li><a href="anotherPage.html">Another Page</a></li>
</div>
<div class="link-box">
<li><a href="index.html">Index</a></li>
</div>
<div class="link-box">
<li><a href="../contactUs.html">Contact Us</a></li>
</div>
</ul>
</div> <!-- end nav -->
<div id="content-container">
<p class="uppercase big-font">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida sed nulla eget eleifend.</p>
</div> <!-- end content-container -->
<div id="clearfooter"></div>
<div id="content-footer">
© Copyright 2014 Big Waves, LLC
</div>
</div> <!-- end background container -->
</div> <!-- end container -->
</body>
</html>
/* CSS Document */
html, body {
margin:0;
padding:0;
height:100%;
overflow-x:hidden;
}
#container{
min-height:100%;
position:relative;
margin-bottom:-50px;
}
#header{
padding:1%;
}
#header img{
height: 80px;
width: 170px;
}
#background-container{
background-size:cover;
background-color:#097;
padding-left:100px;
padding-right:100px;
padding-bottom:20%;
}
#nav li{
list-style: none;
}
.link-box{
padding: 10px;
text-align: left;
}
.link-box a{
text-decoration: none;
border: 12px #000;
padding:5px;
background: rgba(149, 185, 199, 0.4);
}
#content-container{
padding-left:230px;
padding-right:230px;
clear:both;
}
#content-container table{
width:200px;
}
#content-container img{
width:35px;
height:35px;
}
#clearfooter{
height:30px;
clear:both;
}
#content-footer{
width:100%;
height:50px;
position:absolute;
bottom:0;
left:0;
background-color:#099
}
.container-center{
text-align: center;
}
.element-center{
display: inline-block;
padding: 10px;
}
.uppercase{
text-transform:uppercase;
}
.big-font{
font-size:28px;
}
background-attachment:fixed;
这将在屏幕中保留背景图像。解决方法是将整个页面设置为页脚所需的背景，然后分别为页脚上方的所有元素设置背景。只需使您的页脚具有
背景色：透明编辑：根据TylerH的建议。或者将背景添加到正文中（顺便说一句，尝试仅将样式添加到CSS中，不要使用内联样式），或者如果不能，请使用以下方法：
body{100vh}
header{height:10vh}
#content{height:80vh}
footer{height:10vh}
通过这种方式，您将拥有无空格的全屏（假设这是您正在寻找的），并且您可以将bg添加到您的内容div中，无空格为了解决这个问题，我将整个身体制作成您想要的颜色，并将标题颜色更改为白色。这似乎奏效了
body {
background-color:#097;
}
#header {
padding:1%;
background-color: white;
}
考虑将背景图像设置为身体的背景，而不是容器的背景。非常感谢！这是一个很好的解决方案，它消除了空白。只有几个问题。如果我们放大，文本将消失。如果我们增加内容，页面就会断开。你会明白我的意思，如果你复制粘贴一对Lorem IPSOM。内联样式存在是因为背景不同，文本具有不同的样式：（这是因为您必须在文档的头部设置视口元，如