Bootstrap 3 词缀插件在 body 100% 时停止工作答案

【问题标题】：Boostrap 3 affix plugin stops working when body 100%Bootstrap 3 词缀插件在 body 100% 时停止工作
【发布时间】：2013-08-25 03:29:48
【问题描述】：

我试图让页脚始终位于页面底部，如下所示：http://getbootstrap.com/examples/sticky-footer-navbar/

我也在使用 affix 插件，这样当向下滚动时，导航栏会（粘住）到浏览器窗口的顶部。但是，每当我添加

body {
height: 100%
}

词缀停止工作。什么给了？

【问题讨论】：

标签： html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您不必使用插件：

-1- 在导航栏中使用 navbar-fixed-top 类，例如 div class="navbar navbar-default navbar-fixed-top"

-2- 确保您的页面具有正确的结构（对于 Bootstrap 3 是这样）：

<body>

<!-- Wrap all page content here -->
<div id="wrap">
page content here  
</div>  <!-- end wrap -->  

<div id="footer">
  sticky footer here
</div>  <!-- end footer -->  

</body>

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

就是这样！请注意，CSS 和页面结构与 Bootstrap 2 有所不同

祝你好运！

【讨论】：