Fix Footer to Bottom of Page

How to fix footer in the end of the page?

You had a master-footer-wrap and the footer itself set to position fixed. However, you need to set the position: relative for the body and to absolute for the footer. If you do this while either the footer or the master-footer-wrap is still set to position: fixed, it will remain fixed. Check the snippet below for a working example :)

/*BODY*/
html, body {  position: relative;  height: 150%;  margin: 0px 0px 50px 0px;  padding: 0;}
/*FOOTER*/
#footer-logo {  position: absolute;  left: 20px;  top: 12.5px;  width: 61px;  height: 25px;}
.master-footer-list {  list-style-type: none;  overflow: hidden;  padding: 0;  margin: 0;}
.master-footer-list li {  display: inline-block;  vertical-align: middle;  padding-top: 17px;  padding-left: 15px;}
.master-footer-list a:hover {  text-decoration: underline;}
/* removed master footer wrap css */
footer {  font-family: var(--work-sans);  font-weight: 300;  font-size: 14px;  text-align: center;  position: absolute; /* position absolute instead of fixed */  bottom: -50px; /* move inside the body margin */  left: 0;  right: 0;  margin-bottom: 0px;  height: 50px;  width: 100%;  background-color: black;}
/* Removed redundant div/wrapper */
footer a {  color: #FF6869;  text-decoration: none;}
footer span {  color: #C8C7CC;}

<footer>
    <a href="/"><img id="footer-logo" src="/assets/images/logo-white.png"><a/>      <ul class="master-footer-list">        <li><span>© 2019 – iStudi. Todos os direitos reservados.</span></li>        <li><a href="/termos-de-uso">Termos de Uso</a></li>        <li><a href="/politica-de-privacidade">Política de Privacidade</a></li>      </ul>
</footer>

How to fix footer at the bottom of a component in react?

There's a couple solutions here. Instead of bottom: 0 use:

margin-top: 100vh;

This will set the footer at the bottom of the viewport height.

However, your page has quite a few layout issues, and this is really a band-aid. You should consider utilizing flexbox, min-height, or grid to create a sticky footer.

That being said, the solutions for this using react are what they would be in most any circumstance.

The following solutions are preferable because they are "true" dynamic sticky footers. Meaning, the footer stays at the bottom until the main content extends beyond that area, at which point the footer will begin adjusting its position downward:

The min-height Solution

nav {
  height: 40px;
  padding: 10px;
  background: lightblue;
}

main {
  padding: 20px;
  background: purple;
  min-height: calc(100vh - 170px);
}

footer {
  background: magenta;
  padding: 10px;
  height: 50px;
}

<html>
<body>
  <nav>
    Navigation
  </nav>
  <main>
    Page content
  </main>
  <footer> 
    Footer that stays put
  </footer>
</body>
</html>

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

Give the footer a negative margin-top:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

Set Footer to Bottom of Page without using Fixed Position.

You would need to position your footer fixed, then offset its height (110px) from the bottom of the body or containing element (since it is taken out of the normal document flow), e.g: .container.body-content {padding-bottom: 110px;}

.container.body-content {    padding-bottom: 110px;    height: 1000px; /* Force height on body */}
.footer {  position: fixed;  bottom: 0;  background-color: #ffd800;  text-align: center;    right: 0;  left: 0;  background-image: url(/Content/SiteImages/logosmall.png);  background-repeat: no-repeat;  height: 110px;  border-top: 3px solid #082603;}
.footer p {  position: absolute;  top: 50%;  left: 50%;  margin-right: -50%;  transform: translate(-50%, -50%);  color: #082603;  font-size: 150%;  font-family: 'Baskerville Old Face'}

<div class="container body-content">
  <div class="footer">    <p>Quote</p>  </div>
</div>