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相关。这样，页脚就是身体元素内的绝对位置。如果从正文中删除position: absolute;，则页脚将位于视口的绝对位置，如果页面上有大量文本，则它将位于页面中间，重叠文本。

Answer 2

尝试这个..

html,body{height:100%;}
#wrap
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* Negative indent footer by it's height */
}
#push,#footer{height:100px;}

现场演示：

包含更多内容：http://jsfiddle.net/HYf7q/2/

内容较少：http://jsfiddle.net/SCr7b/3/

谢谢......

Answer 3

解决方案是删除中的class="footer navbar-fixed-bottom" <footer id="footer" class="footer navbar-fixed-bottom">

只要你没有加入bootstrap css，我就会在js小提琴中找到答案。

bootstrap粘性页脚但没有滚动内容

3 个答案: