Streaming live at 10am (PST)

Sticky footer regardless of full length page content


#1

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


#2

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.


#3

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 :frowning: 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 :smile:

cheers
sam


#4

Hi @Sambatia

Thanks for the clarification :smile:

This article may help you:
https://css-tricks.com/snippets/css/sticky-footer/

Cheers,
Nelson


#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.