css - 带有 Bootstrap 的粘性页脚

Question

我对 chrome 上的粘性页脚有疑问... 在 FF 和 IE 上一切看起来都很好，好吧...... 当我调整屏幕大小时，内容会按应有的方式换行，但页脚不会重叠我的内容，如果有人可以给我提示或我缺少的东西会很好。

我正在使用 ASP.Net、Boostrap3

CSS..

html,form,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 -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}

 body { padding-top: 100px;}

HTML
<form id="form1" runat="server">
    <div id="wrap">

        <!-- header -->
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
          <div class="container">
              <div style="float:left;"><h1><kbd>Si</kbd>stema</h1></div>
                <div style="float:right;">
                <ol class="breadcrumb">
                  <li><asp:LinkButton>Pag1</asp:LinkButton></li>
                  <li><asp:LinkButton>R2</asp:LinkButton></li>
                  <li><asp:LinkButton>D3</asp:LinkButton></li>
                  <li><asp:linkButton>A4</asp:linkButton></li>
                  <li class="active">F5</li>
                </ol>
            </div>
          </div>
        </nav>
        <div class="container">
            <!-- Begin page content -->

        </div>
    </div>

<div id="footer">
  <div class="container">
     <!-- footer -->
  </div>
</div>

Answer 1

您正在使用 Bootstrap。因此您可以:

 <div id="footer" class="navbar navbar-default navbar-fixed-bottom">

这将使用 Bootstrap JS 和 CSS 为您提供粘性页脚。

编辑:确保您的页脚也在您的容器内

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

      <div id="footer">

        <div class="container">
         <!-- footer -->
        </div>

       </div>    
    </div>
  </div>