全屏幕图片背景 - 页脚室
问题描述:
我在这一块上撞墙。我正在设计一个登录页面,其中有一个全屏幕图片背景,停在页脚处。所以基本上我相信我的麻烦在于创建一个粘脚。全屏幕图片背景 - 页脚室
我一直在关注教程this website。
这里是我的HTML:
<!DOCTYPE html>
<html>
<head>
<code omitted>
</head>
<body>
<div id="wrapper">
<div id="bkgcontainer"></div>
<div class="push"></div>
</div>
<footer>
<address>
<code omitted>
</address>
</footer>
</body>
</html>
我的CSS:
* {
margin: 0;
}
html, body{
height: 100%;
background-color: black;
}
#wrapper {
width: 100%;
position: relative;
min-height: 100%;
margin: 0px auto -25px;
}
footer, .push {
height: 25px;
}
#bkgcontainer {
width: 100%;
height: 100%;
position: relative;
margin: 0 auto -25px;
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
}
footer{
text-align: center;
margin: 0px auto;
color: white;
position: relative;
}
至于我可以告诉大家,我把一切都定好了。但是当我启动网站时,'bkgcontainer'占据了整个屏幕,并且'-25'的下边距低于视口。我无所适从,有什么想法?修复或更好的方式,我都耳熟能详。
答
你可以尝试position:fixed
的页脚类
footer{
text-align: center;
margin: 0px auto;
color: white;
position: fixed;
bottom:0;
width:100%
}
答
你应该在#wrapper指定到任何一个较小的百分比值或最小像素值改变最小高度值,允许脚注来显示。你所做的是告诉浏览器你希望div扩展不少于全屏。
答
可以使画面背景占90%的屏幕高度,使页脚10%和引脚页脚到页面底部:
//remove `footer`
.push {
height: 25px;
}
//set height to 90%;
#bkgcontainer {
width: 100%;
height: 90%;
position: relative;
margin: 0 auto -25px;
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
}
//change height to 10%, change to fixed position, and set bottom to 0. Oh, set width, too.
footer{
height: 10%;
text-align: center;
margin: 0px auto;
background-color: white;
position: fixed;
bottom:0;
width:100%;
}
见this jsfiddle来看看它的外观。
+0
这里假设你把你的图片放在'#bkgcontainer' div中。 – 2014-12-08 04:56:42
答
这是一个完全不同的解决方案。请注意,它不包含你的代码的修改,但是,它是一个完全不同的解决方案(从几个解决方案),以获得页眉和页脚
HTML:
<header>
this is header
</header>
<div id="content">
hello
</div>
<footer>
this is footer
</footer>
CSS:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 60px;
background: green;
position: fixed;
top: 0;
}
#content {
width: 100%;
height: 100%;
background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/Beautiful-Wallpapers-7.jpg");
background-size: 100%;
}
footer {
width: 100%;
height: 60px;
background: blue;
position: fixed;
bottom: 0;
}
是你能熔酚醛树脂有你的问题吗? – 2014-12-09 02:54:59
还没有管理时间回到这个项目。我会在我回来后回复。 – Cody 2014-12-09 15:39:22