CSS CSS Layout Basics Getting Started with CSS Layout Creating a Sticky Footer

What happens if I add a new line of text to my footer? ie. How do I dynamically calculate the height of my footer.

In this video Guil shows us how to stick our footer to the bottom of the page with:

.wrap {
     min-height: calc(100vh - 89px);

Where 89px is the current height of my footer element.

This works, but it doesn't feel like very good practice. As soon as I make any change to my footer this will break. Is this a document-query thing I'll learn later? It just feels a little bit nagging not to know.

Thanks in advance!

1 Answer

I'm not sure, but the more text in your footer, the height wil change. So if you will check this with browser' Dev Tools, you put the new height of the footer in your calculation. Then it would work I suppose.