bootstrap粘性页脚，但没有滚动内容 [英] bootstrap sticky footer but no scroll content

问题描述

我想要一个棍子到底部页脚，女巫我有，但我的内容滚动时，它填充页面的内容，我想让我的内容推脚注，而不是滚动。
我使用Bootstrap

I want a stick to bottom footer, witch i have but my content scrolls when it fills the page to the content, i want my content to push the footer down instead of scrolling. I use 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>

推荐答案

解决方法是删除

< footer id =footerclass =footer navbar-fixed-bottom中的class =footer navbar-fixed-bottom >

the solution is to delete the class="footer navbar-fixed-bottom" in the
<footer id="footer" class="footer navbar-fixed-bottom">

答案我在js fiddle工作，只要你不放在bootstrap css。

The answers i got work in js fiddle as long as you don't put in the bootstrap css.

这篇关于bootstrap粘性页脚，但没有滚动内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！