2017年更新

“固定”页脚和“粘性”页脚之间存在差异......您需要粘性页脚。

Bootstrap 3

使用标准的“粘性页脚”示例。此方法包装整个页面内容并按下页脚。

这是一个有效的演示：http://bootply.com/93620

<!-- Wrap all page content -->
<div id="wrap">
  <!-- Fixed navbar -->
  <div class="navbar navbar-default navbar-fixed-top">
   ...
  </div>
  <div class="container">    
    <!-- page content -->
  </div>
</div>
<div id="footer">
  Footer
</div>

/* Sticky footer styles
-------------------------------------------------- */

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 !important;
  height: 100%;
  /* 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;
}

Bootstrap 4

因为flexbox在Bootstrap 4中是默认的，所以“粘性”页脚更容易。

<wrapper class="d-flex flex-column">
    <nav>
    </nav>
    <main>
    </main>
    <footer>
    </footer>
</wrapper>

body, wrapper {
   min-height:100vh;
}

main {
    flex:1;
}

演示：Bootstrap 4 Sticky Footer

Answer 2

CSS

 /*Sticky footer*/
    form , html, body {height: 100%;}
    body{background-color:inherit;}
    .wrapper{min-height:100%;height:auto!important;height:100%;margin:0 auto -4em}
    .footer,.push{height:4em}

如果您不使用ASP.NET，则可以从CSS

中删除表单{height：100％}

HTML

<body>

<div class="wrapper">
    ....Content....
    <div class="push"></div>
</div>

<div class="footer">
   <div class="container">
     <hr /> 
     <span>copyright 2014 | menelabs</span>

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

Answer 3

如今，几乎所有浏览器都支持视口单元。因此用它来粘贴页脚。它对我有用。

您可以检查视口支持here。

在没有内容的情况下，为所需的页脚位置调整最小高度。

#main {
   min-height: 70vh;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div id="header" class="bg-secondary">Header: Sticky footer example</div>

<div id="main" class="bg-light">   
     <!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Less content</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">No content</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">More content</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane container active" id="home">
      <p>Content 1: Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
    </div>
    <div class="tab-pane container fade" id="menu1">
    </div>
    <div class="tab-pane container fade" id="menu2">
      <p>Content 0</p>
      <p>Content 1</p>
      <p>Content 2</p>
      <p>Content 3</p>
      <p>Content 4</p>
      <p>Content 5</p>
      <p>Content 6</p>
    </div>
  </div>   
</div>


<div id="footer" class="bg-secondary">
   Footer
</div>

Bootstrap中的页脚，随内容延伸或粘在底部

3 个答案:

2017年更新