html - 以响应式方式创建粘性页脚

Question

我正在尝试创建一个响应性粘性页脚，但没有成功。我遵循了每一个指南和每一个常见的最佳实践。这是我的例子:example

在示例中，我将页脚放在页面底部。此外，我将使用图像作为整个页面的背景

.blur {
  height: 100%;
  background: url('image.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

你有什么想法吗？

Answer 1

保持 HTML 不变，并将 CSS 更改为此(显然您稍后会根据需要更改它，我只是添加了用于可视化目的的样式):

html, body {
    background-color: #FFF;
    font-family:'Raleway', 'Open Sans', sans-serif;
    font-weight: 400;
}
body {
    color: #333;
    background:url('http://2.bp.blogspot.com/-OSVC5PTEAKU/TZNnUHaoJZI/AAAAAAAAApo/WcP3qSUPAoo/s1600/monta%2525C3%2525B1as%252520verdes%255B1%255D.jpg') no-repeat 50%;
    background-size:cover;
    min-height: 100vh;
    padding-bottom:80px /* footer height + 20 px for spacing, but adjust as you like */;
}
a {
    color: #eee;
}
a:hover, a:focus {
    text-decoration: none;
    color: #dedede;
}
/* Langind Page */
 .inner {
    margin-top: 20px;
}
.btn-facebook-inner {
    margin-top: 80px;
    padding: 30px;
}
.btn-facebook {
    width: 300px;
    border-radius: 4px;
    background-color: #3B5998;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    font-family:'Lucida Grande', sans-serif;
}
.btn-facebook:hover, .btn-facebook:focus {
    color: #dfe3ee;
    text-decoration: none;
}
footer {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:60px;
    background:#fc0;
}
footer .social-icons > ul > li {
    padding-right: 12px;
}

See fiddle这里

这将使底部固定，因此如果内容很多，页脚将与内容重叠。如果您不希望出现此行为，请将 fixed 更改为 absolute

只是我在您的代码中看到的一条评论，并认为这里经常出现错误:虽然将 html 和 body 一起定位很常见，但它们不是相同的东西，并且并非所有样式都适用两者都