如何在底部放置页脚？ [复制]答案

【问题标题】：How to place footer at the bottom? [duplicate]如何在底部放置页脚？ [复制]
【发布时间】：2022-01-21 19:31:55
【问题描述】：

如何在页面底部放置页脚？

当使用 fixed-bottom 类时，页脚在滚动页面时会覆盖内容。

<div class="sticky-top">
    <qipr-header></qipr-header>
    <qipr-sidenav></qipr-sidenav>
</div>
<section class="container-fluid">
    <div class="row">
        <div class="content offset-md-3 offset-lg-2 col-md-9 col-lg-10 mb-4 mt-2">
            <router-outlet></router-outlet>
        </div>
    </div>
</section>
<div class="fixed-bottom">
    <qipr-footer></qipr-footer>
</div>

【问题讨论】：

这能回答你的问题吗？ Bootstrap footer at the bottom of the page

标签： css bootstrap-4

【解决方案1】：

.fixed-bottom {
  position: fixed;
  bottom: 0;
}

&lt;div class='fixed-bottom'&gt;&lt;/div&gt;

【讨论】：

结果会完全一样

【解决方案2】：

创建一个父级（div 或 body）以相对位置放置页面元素（页眉、包装和页脚）。
创建具有固定位置的标题（用于粘性标题）
为页面内容添加容器
创建没有任何位置或显示的页脚

.page-body {
   position: relative;
   width: 500px;
   font-family: arial;
}

.top-header {
   position: fixed;
   top: 0;
   left: 0;
   background: #efefef;
   border: 1px solid #ccc;
   border-radius: 0 0 10px 10px;
   height: 30px;
   width: 500px;
   margin: 0 10px;
   padding: 10px 15px;
   z-index: 9999;
}

.container {
   color: #414141;
   padding: 50px 10px 10px;
}

.footer {
   background: #efefef;
   border: 1px solid #ccc;
   height: 200px;
   width: 500px;
   padding: 10px 15px;
   border-radius: 10px;
}

<div class="page-body">
   <div class="top-header">Header</div>
   <div class="container">
      <p>1: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>2: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>3: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>4: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>5: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>6: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>7: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>8: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>9: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>10: Lorem ipsum dolor sit amet...</p>
      <br>
      <p>11: Lorem ipsum dolor sit amet...</p>
   </div>
   <div class="footer">
      Footer!
   </div>
</div>

【讨论】：