Send Footer To the End of The Page : <p>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?
<a href="https://i.stack.imgur.com/19lSB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/19lSB.jpg" alt="enter image description here"></a></p>

<p>Footer.css:</p>

<pre><code>* {
  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;
}
</code></pre>

<p>Footer.tsx:</p>

<pre><code>const Footer = () =&gt; (
  &lt;footer className="site-footer"&gt;
  &lt;p className = 'text'&gt;  APP&lt;/p&gt;
&lt;/footer&gt;
  );

  export default Footer;
</code></pre>
