Question

我知道有关于Footers的成千上万的主题但是我仍然不能调整我的内容，我已经尝试了很多东西但没有任何帮助.....只有当我滚动时，页脚应该始终位于页面的底部记下内容。希望有人会有任何建议！

这是我的页脚：

<div class="wrap">
......
</div>
<div class="footer">
      <div class="container">
        <div class="col-sm-4">  
            <img class="menu-icon" src="img/other/user.png"><h11>Account</h11>
            <ul class="unstyled">
            <li><a href="#" style="color: #909090;">ddd</a></li>
            <li><a href="#" style="color: #909090;">ddd</a></li>
            </div>
            <div class="col-sm-4">
            <img class="menu-icon" src="img/other/gear.png"><h11>Support</h11>
            <ul class="unstyled">
            <li><a href="#" style="color: #909090;">ddd</a></li>
            <li><a href="#" style="color: #909090;">ddd</a></li>
            <li><a href="#" style="color: #909090;">ddd</a></li>
            <li><a href="#" style="color: #909090;">ddd</a></li>
            </div>
            <div class="col-sm-4">
            <img class="menu-icon" src="img/other/share.png"><h11>Share Us</h11>
            <ul class="unstyled">
            <li><a href="#" style="color: #909090;"><img class="menu-icon" src="img/other/tw.png">Twitter</a></li>
            <li><a href="#" style="color: #909090;"><img class="menu-icon" src="img/other/fb.png">Facebook</a></li>
            <li><a href="#" style="color: #909090;"><img class="menu-icon" src="img/other/gp.png">Google Plus</a></li>
            </div>
        </div>
        </div>

CSS：

html,
body {
  height: 100%;
}
.wrap {
 height: auto !important;
  min-height: 100%;
}
.footer {
    position:absolute;
   bottom:0;
   width:100%;
  height: 140px;
  background-color: #222;
}

Answer 1

检查以下链接是否适合您。

Fiddle

#footer {
position: relative;
background-color: darkcyan;
color: white;
z-index: 1;

}

Answer 2

我不是100％肯定你想要实现的目标。但我怀疑这个错误可能在你的CSS中。

您目前正在使用： position:absolute; 如果您希望页脚粘贴到内容的底部，则不需要操纵元素以使用绝对定位。

这是你面临的问题吗？此示例使用position:absolute作为代码建议。 https://jsfiddle.net/pvwLu49x/1/

这是你想要做的吗？

https://jsfiddle.net/pvwLu49x/2/

Bootstrap页脚定位

2 个答案: