以响应式的方式创建粘性页脚 [英] Create a sticky footer in a responsive manner

问题描述

我正在尝试创建一个响应式粘滞页脚，但没有任何成功。我遵循了每一个指南和每一个常见的最佳实践。这里是我的例子：示例

在例如，我会将页脚放在页面的底部。另外，我将使用图片作为整个页面的背景。

  .blur {
身高：100％; 
背景：url（'image.jpg'）无重复中心固定; 
 -webkit-background-size：cover; 
 -moz-background-size：cover; 
 background-size：cover; 
 -o-background-size：cover; 
} 
  

你有什么想法吗？保持你的HTML原样，并改变你的CSS（显然你会稍后改变它到你的需要，我只是为了可视化目的添加了样式）：解决方案

/ p>

  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; 
最小高度：100vh; 
 padding-bottom：80px / *页脚高度+ 20px用于间距，但可以随意调整* /; 
} 
 a {
 color：#eee; 
} 
 a：hover，a：focus {
 text-decoration：none; 
颜色：#dedede; 
} 
 / * Langind Page * / 
 .inner {
 margin-top：20px; 
} 
 .btn-facebook-inner {
 margin-top：80px; 
 padding：30px; 
} 
 .btn-facebook {
 width：300px; 
 border-radius：4px; 
背景颜色：＃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; 
} 
页脚{
 position：fixed; 
 bottom：0; 
剩下：0; 
宽度：100％; 
 height：60px; 
背景：＃fc0; 
} 
页脚.social-icons> ul> li {
 padding-right：12px; 
} 
  

看到小提琴 here

这会让底部被固定，所以如果你有很多内容，页脚会重叠内容。如果您不想要这种行为，请将固定更改为绝对

只是我在您的代码中看到的一条评论，并且将其视为一个周期性错误：虽然将html和body定位在一起很常见，但它们是 NOT 是同一个事物而不是所有样式适用于两个

I'm trying to create a responsiveness sticky footer but without any success. I have followed every guide and every common best practices. Here it is my example: example

In the example I would put the footer at the bottom of the page.In addition I would use an image as background of the entire page

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

Do you have any idea?

解决方案

keep your HTML just as is, and change your CSS to this (obviously you'll change it later to your needs, I just added styling for visualization purposes):

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 here

This will make the bottom to be fixed, so if you have a lot of content, the footer will overlap the content. If you don't want this behavior, change fixed to absolute

Just a comment I have seen on your code and see as a recurrent error around here: while it's common to target html and body together, they're NOT the same thing and not all styles applies to both

这篇关于以响应式的方式创建粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！