Question

我在这个墙上撞墙。我正在尝试设计一个具有全屏图片背景的着陆页，该页面在页脚处停止。所以基本上我相信我的麻烦在于创造一个粘性的页脚..

我一直关注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;
}

据我所知，我把一切都搞定了。但是当我启动网站时，＆＃39; bkgcontainer＆＃39;占据全屏和底部边距＆＃39; -25＆＃39;在视口下方。我不知所措，有什么想法吗？修复或更好的方式，我全都是耳朵。

Answer 1

您可以使图片背景占据屏幕高度的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了解其外观。

Answer 2

这是一个完全不同的解决方案。请注意，它不包含对代码的修改，但是，它是一个完全不同的解决方案（在几个解决方案中）来获取页眉和页脚

<强> 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;
}

这是小提琴：http://jsfiddle.net/harshulpandav/7S4Xx/214/

Answer 3

您可以尝试使用position:fixed作为页脚类

footer{
    text-align: center;
    margin: 0px auto;
    color: white;
    position: fixed;
    bottom:0;
    width:100%
}

Answer 4

您应该将#wrapper上的最小高度值更改为较小的百分比值或最小像素值，以允许显示页脚。你所做的是告诉浏览器你希望div扩展不低于全屏。

全屏图片背景 - 页脚的空间

4 个答案: