html - Bootstrap 粘性页脚但没有滚动内容

Question

我想要一个粘性底部页脚，我已经有了，但是当它用内容填充页面时我的内容会滚动。我希望我的内容将页脚向下推而不是滚动。

如何使用 Bootstrap 实现这一目标？

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;
 /* Negative indent footer by its height */
 margin: 0 auto -250px;
 /* Pad bottom by footer height */
  padding: 0 0 250px;
}

/* Set the fixed height of the footer here */
#footer {
 height: 250px;
}

#footer {
 background-color: #000000;
  border-top:1px solid gray;
 background-image:url('../img/bg1.png');
 background-repeat:repeat-x;
 background-position:center bottom; 
}

html

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

  <!-- Begin page content -->
  <div class="container">

        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        </asp:ContentPlaceHolder> 
  </div>
</div>
    <div id="push">
</div>

        <footer id="footer"  class="footer navbar-fixed-bottom">
                    <div class="container body-content">
            <p style="margin-top:20px;">&copy; <%: DateTime.Now.Year %> - Make-Up Studio Sverige</p>
                        </div>
        </footer>

Answer 1

例如:HTML:

<div class="wrapper">
   Content here
</div>
<div class="footerfix"></div>
<footer>
    <a href="#">Company...</a>
</footer>

CSS:

html, body { 
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    position: relative;
    min-height: 100%;
}
.wrapper
{
    position: relative;
    overflow: auto;
}
.footerfix{height:4rem;}
footer{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
  background-color: #222;
}

页脚具有绝对位置，位于页面底部。 Footerfix 在包装器和页脚之间添加额外的填充。随意添加内容，您会看到页脚始终位于底部，包装和页脚之间有小填充。

JSFiddle 演示:http://jsfiddle.net/HYf7q/5/

删除虚拟文本，您可以看到页脚在正确的位置，有或没有页面内容。

注意:

正文必须相对于 html。这样，页脚是 body 元素内的绝对位置。如果你从正文中删除 position: absolute;，页脚将是视口(viewport)的绝对位置，如果页面上有大量文本，它将位于页面中间，与文本重叠。