我正在制作一个页面,其布局分为3个部分:页眉、正文和页脚。我想要一个背景图像在我的主体。现在,当我尝试这样做时,我遇到了一个问题。图像未覆盖整个区域。它在底部留下一些区域。请检查这把小提琴以获得正确的解释。
以下是我迄今为止所做的:
HTML
<html>
<head>
<title>Gehri Route: Login, Signup</title>
</head>
<body>
<div class='headercontainer'>
<div class='header'>
header
</div>
</div>
<div class='mainbodycontainer'>
</div>
<div class = 'footercontainer'>
<div class='footer'>
footer
</div>
</div>
</body>
</html>
CSS
body
{
background-color: rgb(250,250,250);
margin: 0;
padding: 0;
}
.headercontainer
{
background-color: rgb(245,245,245);
min-width: 999px;
height:60px;
border:1px solid #666;
left: 0;
}
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
padding: 80px 0;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.footercontainer
{
background-color: rgb(245,245,245);
width: 100%;
height:82px;
border: 1px solid #666;
left:0;
position: fixed;
bottom: 0;
}
.header
{
margin: 0px auto;
width: 999px;
}
.mainbody
{
margin: 0px auto;
width: 999px;
}
也请帮我做这个反应灵敏的设计。
您需要强制body和html标记的高度为100%。如果没有内容,则不会显示背景,因为元素(.mainbodychannel)的高度为0。在您的情况下,它是80像素,因为您应用了填充。
检查一下这把小提琴。http://jsfiddle.net/olwez/ncLZN/
我在body和html标签中添加了100%的高度,在.mainbodychannel分区中添加了最小高度100%。这样,您就不必手动设置高度或在.mainbody容器中添加内容,图像就可以随心所欲地运行。
我只是投了一个溢出:隐藏;在body标签上,这样滚动就消失了。
这是完整的css。
html { height: 100% }
body
{
background-color: rgb(250,250,250);
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.headercontainer
{
background-color: rgb(245,245,245);
min-width: 999px;
height:60px;
border:1px solid #666;
left: 0;
}
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
min-height: 100%;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.footercontainer
{
background-color: rgb(245,245,245);
width: 100%;
height:82px;
border: 1px solid #666;
left:0;
position: fixed;
bottom: 0;
}
.header
{
margin: 0px auto;
width: 999px;
}
.mainbody
{
margin: 0px auto;
width: 999px;
}
将其添加到您的样式中:
width:600px;
height:450px;
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
padding: 80px 0;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:600px;
height:450px;
}
http://jsfiddle.net/QcUfm/9/
背景图像只会显示内容或高度所显示的内容。如果您的div没有足够的内容来强制父元素足够大,那么您将无法看到所有内容。此外,如果你使用任何类型的定位,如固定、绝对甚至相对定位,并移动它,这也会影响它。我没有看小提琴,但这些都是一些常见的问题。