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">

这将使用引导程序JS和CSS为您提供粘性页脚。

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

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

      <div id="footer">

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

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

粘性页脚与引导程序

1 个答案: