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和正文一起定位是常见的，但他们不相同事情并非所有风格都适用于

Answer 2

我看着这个，走了另一条路。如果您固有地设置页脚的“高度”值，而您的页脚仍然会“响应”，则背景将遵循样式，并且仅在“n px”处显示，并在下方显示正文颜色。

Answer 3

使用以下代码

<强> HTML：

<body>


   <div id="wrap">



    </div>

    <div id="footer">

    </div>

<强> CSS：

html,
body {
 height: 100%;
   /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
   height: 60px;
   background-color: #f5f5f5;
}

修改的 HTML

<div id="blur">  <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4 inner"> <h1 class="text-center">Title</h1> </div> </div> <div class="row"> <div class="col-md-4 col-md-offset-4 btn-facebook-inner"> <a href="/" class="btn btn-facebook center-block">Login with Facebook</a> </div> </div> </div> </div> <div id="footer"> <div class="container"> <div class="row"> <div class="col-md-3 col-md-push-9 social-icons"> <ul class="list-inline"> <li>Facebook</li> <li>Instagram</li> <li>Twitter</li> </ul> </div> <div class="col-md-9 col-md-pull-3"> <ul class="list-inline"> <li>Privacy Policy</li> <li>Terms of Use</li> </ul> </div> </div> </div> </div>

<强> CSS

html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ } #blur { min-height: 100%; height: auto !important; height: 100%; /* Negative indent footer by its height */ margin: 0 auto -60px; /* Pad bottom by footer height */ padding: 0 0 60px; } /* Set the fixed height of the footer here */ #footer { height: 60px; background-color: #f5f5f5; }

以响应方式创建粘性页脚

3 个答案: