4

我一直在寻找一种方法来为我正在处理的 Twitter Bootstrap 3 项目添加页脚。

我想要的是当内容太短而无法填满屏幕时，页脚会粘在页面底部，但是当内容填满屏幕时会被内容向下推。

到目前为止，我找到并尝试过的所有解决方案要么不起作用，要么始终显示页脚，要么在页面下方显示页脚，因此仅在滚动时才可见。

提前致谢！

4

3 回答 3

5

2019 年更新

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

引导程序 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;
}

引导程序 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 粘性页脚

另一种情况是底部页脚始终位于底部，并且内容不会将其推到视口下方。相反，内容区域会根据需要而不是正文滚动。这是全高“应用程序”布局..

演示：Bootstrap 4 底部页脚

于 2013-12-18T12:25:17.867 回答
0

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 中删除 form{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>
于 2013-12-18T12:28:33.757 回答
0

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

您可以在此处查看视口支持。

当没有内容时，调整最小高度以获得所需的页脚位置。

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

于 2019-08-16T09:33:52.440 回答