将页脚发送到页面末尾[重复]

Posted 2023-03-21

【中文标题】将页脚发送到页面末尾[重复]

【英文标题】：Send Footer To the End of The Page [duplicate]

【发布时间】：2020-05-18 02:45:12

【问题描述】：

如何将页脚发送到屏幕底部，以及如何以响应式方式将其扩展到全屏？

页脚.css：

* 
  margin: 0;

html, body 
  height: 100%;

.page-wrap 
  min-height: 100%;
  margin-bottom: -142px; 

.page-wrap:after 
  content: "";
  display: block;

.site-footer, .page-wrap:after 
  height: 142px; 

.site-footer 
  background: black;


.text
  color: white;

页脚.tsx：

const Footer = () => (
  <footer className="site-footer">
  <p className = 'text'>  APP</p>
</footer>
  );

  export default Footer;

【问题讨论】：

你需要让它的位置固定，并设置它的底部为0

【参考方案1】：

解决方案：

<style>

   .site-footer
      position: fixed; left:0; bottom:0; width: 100%;
   

</style>

【参考方案2】：

我认为这应该可行：

.site-footer
       left: 0;
       bottom : 0;
       background: #000;
       position: fixed;
       display: block;
    

另外，如果你不想修复它，就用这个：

.site-footer 
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  background-color: #000;

【讨论】：

left:0 也是必需的。