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

标签： javascript html css reactjs material-ui

【解决方案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 也是必需的。