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

Posted 2023-03-21

【中文标题】如何在底部放置页脚？ [复制]

【英文标题】：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

【参考方案1】：

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

<div class='fixed-bottom'></div>

【讨论】：

结果会完全一样

【参考方案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>