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 >
        <div className="footer-link-wrapper">
          <div >
            <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 >
            <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

CodePudding user response：

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

CodePudding user response：

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.