1

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

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

body {
height: 100%
}

词缀停止工作。是什么赋予了？

4

1 回答 1

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 相比有所改变

祝你好运！

于 2013-08-22T13:58:19.590 回答