Question

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

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

body {
height: 100%
}

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

Answer 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

有所不同祝你好运！

身体100％时，Bootstrap 3附加插件停止工作

1 个答案: