Sticky footer regardless of full length page content

[Sambatia (Sameh Abdalla)]

Hi,

I would like to create a footer that sticks to the bottom of the page
whether I have enough content to push it all the way down or not.

Basically the problem described in the URL below,

http://cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

Thanks,
Sameh

[Anna_Kelian]

You can do this by giving your content section right above the footer a min-height in vh. example if your Header is 20 vh and the footer is 10vh make the middle section have a min-height of 70 vh.

[Sambatia (Sameh Abdalla)]

Hi Anna,

Thank you very much for your reply.

I think I might have explained it all wrong and also got you confused with the title of the question my bad, sorry about that.

I did try your solution and it did achieve part of the task but not all of it.

What I would like to achieve is to have a footer resides at the bottom of the page even while the page content is not enough to push it all the way down (which is very essential for large screens), But with your solution, if I try it on smaller screens or in mobile mode, the footer kinda overflow on top of the content and becomes like a bottom fixed navbar (which is not what I want). I would like to have the footer at the bottom of the page if the content is not enough to push it down, and disable that if the screen is smaller and the content is pushing the footer down anyway.

was I clear enough this time

cheers
sam

[PixelGeek (Nelson)]

Hi @Sambatia

Thanks for the clarification

This article may help you:

Sticky Footer | CSS-Tricks

Cheers,
Nelson