Bootstrap侧边栏和页脚无法正常工作

Question

我必须为使用jQuery和bootstrap 3开发的许多网页添加一个页脚。我已经编写了基于this Bootstrap's example的以下脚本来完成这项工作

// Default
$( document ).ready(function() {
        $('body').append('<footer class="footer">' + 
                               ' © 2015 ABC Company. All rights reserved. | Content for internal use only. | ' +
                               '<a href="mailto:#">Contact Us</a> ' +
                          ' </footer>');
});

相关CSS

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 40px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 40px;
  background-color: #99FFFF;
  padding-top:5px;
}

这适用于所有页面，除了带有侧边栏的页面，其中侧边栏与页脚重叠，如下所示

我尝试通过在CSS中将margin-bottom: 40px; /* Margin bottom by footer height */添加到.sidebar来解决此问题。现在它看起来像下面

Bootply

如何解决这个问题？我无法为每个页面添加和设置单个页脚，因为页面很多。

Answer 1

在你的页脚的CSS中添加z-index：600，会将你的页脚放在所有内容的顶部。

Answer 2

您需要告诉您的页脚显示在页面上的其他元素前面。使用z-index CSS属性应该有帮助。