Send Footer To the End of The Page

Question

How can I send my footer towards the bottom of my screen and how can I extend it to the full screen in a responsive way?

Footer.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;
}

Footer.tsx:

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

  export default Footer;

you need to make it position fixed, and set it's bottom to 0 — Ali Kleit, Feb 01 '20 at 20:08

score 1 · Accepted Answer · answered Feb 01 '20 at 20:11

1

Solution:

<style>

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

</style>

answered Feb 01 '20 at 20:11

Zeeshan Eqbal

245
2
11

Divyam Dhadwal · Answer 2 · 2020-02-01T20:13:16.010

0

I think this should work:

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

Also, If you don't want it to be fixed, just use this:

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

edited Feb 01 '20 at 20:13

answered Feb 01 '20 at 20:10

Divyam Dhadwal

395
3
19

left:0 is also required. – Zeeshan Eqbal Feb 01 '20 at 20:12

Send Footer To the End of The Page

2 Answers2

Solution: