粘性页脚底部不重叠

我想让页脚粘贴到页面底部。如果内容很小，页脚应该位于浏览器的底部。内容和页脚之间的空白应该是空的。粘性页脚底部不重叠

我已经尝试了各种方法，但页脚仍然直接在内容下面，而不是在浏览器的底部。

这里是我的代码

<div id="content">   
    <a href="item.html"> 
     <div class="col-xs-12 col-md-6 col-lg-3 item"> 
      <div class="opacity"></div> 
      <div class="box_bg"> 
       <h4 class="color1">Headline</h4> 
       <p>Description</p>      
      </div> 
     </div> 
    </a> 
    <a href="item.html"> 
     <div class="col-xs-12 col-md-6 col-lg-3 item"> 
      <div class="opacity"></div> 
      <div class="box_bg"> 
       <h4 class="color1">Headline</h4> 
       <p>Description</p> 
      </div> 
     </div> 
    </a> 
</div> 
<footer class="bar bar-tab">   
    <a class="tab-item" href="#"> 
     Home 
    </a> 
</footer>

CSS：

#content{ 
    min-height: 100%; 
} 
footer{ 
    height: 50px; 
    position: relative; 
    bottom: 0; 
}

来源

2016-09-14 Ricky Spanish

[问题与CSS粘页脚]的可能的复制（http://stackoverflow.com/questions/3906065/problems-with-css-sticky-footer） – Christoph

古典 - > http://ryanfait.com/sticky-footer/ –

如果我明白你想要什么，你需要使你的页脚位置：fixed;并添加填充底部到您的容器。

身体会坐在页脚后面，因此您需要的填充略大于页脚高度。

https://jsfiddle.net/c0Lrcg4s/

#content{ 
    min-height: 100%; 
    padding-bottom:60px; 
} 
footer{ 
    height: 50px; 
    position: fixed; 
    bottom: 0; 
}

你可以使用的位置是：绝对的;但是，这不会正确工作，因为它的相对容器将是视口，然后将随屏幕一起滚动。

来源

2016-09-14 08:41:57 Tom

非常感谢！但是当内容越大，页脚就越过内容。 –

添加了一个清晰的，不，它的工作。 –

确保将填充底部添加到内容的最外层包装中。 – Tom

试着改变你的CSS页脚是absolute定位：

footer{ 
    height: 50px; 
    position: relative; 
    bottom: 0 
}

Codepen演示：http://codepen.io/anon/pen/NRxQQP

来源

2016-09-14 08:41:30

你可以用jQuery来做到这一点，因为你需要“窗口”的高度。在jQuery中，你可以这样写：

var height = $(window).height(); 
$("#content-wrapper").css({height : height});

当然，你也可以降低高度，页脚和页眉的高度，所以你会看到页脚当你打开页面。

获得此高度变量的最佳方法是在.resize（）fincton中。

然后在CSS中，您可以设置：

#content-wrapper{ 
position:relative; 
} 
.footer{ 
position: absolute; 
bottom: 0; 
}

.footer和＃内容应该是＃内容包装

来源

2016-09-14 08:47:15

内，如果你的页脚位置设置为固定它会留在同一使用top和left属性修复它的位置。

footer{ 
    height: 50px; 
    **position: fixed;** 
    bottom: 0; 
}

来源

2016-09-14 08:50:13

粘性页脚底部不重叠

回答

相关问题