'using React and css the footer does not stay at the page's bottom

the footer of my page keeps moving up when the page's content is short. Any idea on how to fix this, please? I have tried using position: absolute, left:0 and bottom:0

Footer.js

function Footer() {
  return (
    <div className="footer-container">
      <div class="footer-links">
        <div className="footer-link-wrapper">
          <div class="footer-link-items">
            <Link to="/signup">How it works</Link>
            <Link to="/about">About</Link>
            <Link to="/book">Book</Link>
            <Link to="/contact-us">Contact Us</Link>
          </div>
        </div>
        <div className="footer-link-wrapper">
          <div class="footer-link-items-subscription">
            <p className="footer-subscription-text">
              You can unsubscribe at any time.
            </p>
            <div className="input-areas">
              <form className="input-areas">
                <input
                  className="footer-input"
                  name="email"
                  type="email"
                  placeholder="Your Email"
                />
              </form>
              <Button buttonStyle="btn--outline">Subscribe</Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Footer.css

.footer-container {
    background-color: #5A6978;
    padding: 4rem 0 2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

enter image description here

cssreactjs


Solution 1:[1]

Use https://css-tricks.com/snippets/css/a-guide-to-flexbox/ in this case is the best solution

The rules for a good responsive page in this case are

display:flex, flex-direction:column, justify-content:space-between

to the container css that actually wrap whole page

Check this:

https://codepen.io/Levi-D/pen/GRyVjJq

Solution 2:[2]

The flexbox settings for the footer itself won't solve the issue. You need to be playing with the parent component/element of the footer. So you would set the parent (the page container) to:

display: flex; flex-direction: column;

Then you can have three child components, one for header, one for body and one for footer.

Header you can leave as is. Body add flex-grow: 1, and for footer add flex-shrink: 0 (maybe set a height for the footer so it shrinks to the height you want not to the content size).

This should solve your issue using just flexbox.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Levi D.
Solution 2 Saif Ehsan

Related Questions