Footer behaviour

I would like to have a footer like on the Instagram landing page. It isn’t a sticky footer (even if i resize the browser window it doesnt overlap with the content on the secren) but at the same time on larger screens it stays at the bottom of the page. Any ideas how to get the same behaviour?

The simplest modern way is to set the body as a Flex container with flex-direction:column, and set a margin-top:auto to the footer.

1 Like

Thx for your answer. It what I did, and the foooter just stays at the bottom of the window overlaping with the content if I resize the browser window vertically. On the instagram landing page it doesnt happen.

I tested it before answering, and it doesn’t overlap with the content above.

http://vincent.polenordstudio.fr/snap/Webflow_-_Prolicent_2018-09-24_12-26-39.png

and

http://vincent.polenordstudio.fr/snap/Webflow_-_Prolicent_2018-09-24_12-27-08.png

It did help. Thank you so much!