How can I make my footer move with the content (make it responsive)?

Question

How can I make my footer

1. be at the bottom when there is nothing to scroll.
2. move when there is much content.

Until now I have the following CSS Code:

    * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    font-size: 150%;
    color: white;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.footer-link a {
    color: #5f5f79;
    font-size: 87.5%;
    text-decoration: none;
}
.footer-link {
    margin: 0px 60px;
}
.copy {
    color: #5f5f79;
    font-size: 87.5%;
    margin-top: 5px;
}

...and there is the HTML:

<div class="footer">
        <p class="footer-link"><a href="impressum.html">Impressum</a></p>
        <p class="copy">Coypright 2020</p>
        <p class="footer-link"><a href="datenschutz.html">Datenschutz</a></p>
      </div>

I really hope you can help me :)

Answer 1

You could make the following change:

.footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    font-size: 150%;
    color: white;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

However you need to make sure, that the footer's container element has a padding-bottom: 70px; - Meaning the container pads the content with pixels equal to the footer's height. This way no content will be covered by the footer.

Maybe you can use jsfiddle to put all the code you have in. This way we can better help you.

Let me know if this helped.

Answer 2

You have to change an HTML structure. You need to make a wrapper div inside which your footer and your content will reside.

You want to keep your footer fixed to the bottom of the wrapper by using position: absolute and keeping padding-bottom: footer-height in wrapper div.

 * { margin: 0px; padding: 0px; box-sizing: border-box; } .wrapper{ position: relative; border:5px solid black; min-height: 100vh; padding-bottom: 70px; } .other-content{ border:5px solid red; font-size: 34px; } .footer { position: absolute; bottom: 0; width: 100%; font-size: 150%; color: white; height: 70px; display: flex; align-items: center; justify-content: center; } .footer-link a { color: #5f5f79; font-size: 87.5%; text-decoration: none; } .footer-link { margin: 0px 60px; } .copy { color: #5f5f79; font-size: 87.5%; margin-top: 5px; }

 <div class="wrapper"> <div class="other-content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis vero maiores odio nulla voluptas, officiis numquam modi ipsa reiciendis eos quae vel magnam doloremque, et culpa recusandae sint animi iste. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi unde similique quis reiciendis recusandae est dignissimos. Commodi porro reprehenderit ex ipsum, ullam excepturi adipisci quod, numquam nulla praesentium delectus magni!</div> <!-- other content --> <div class="footer"> <p class="footer-link"><a href="impressum.html">Impressum</a></p> <p class="copy">Coypright 2020</p> <p class="footer-link"><a href="datenschutz.html">Datenschutz</a></p> </div> </div>