Anna Olshevskaia Anna Olshevskaia - 3 years ago 143
CSS Question

Footer on the bottom

I stuck with footer.

I have this code - https://jsfiddle.net/annaolsh/pLzv5sg5/13/

#footer {
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: orange;
text-align: center;
}


On small screen navbar is displayed on the top and footer is on the bottom - that's correct.

But on big screens when navbar is displayed vertically on the left side, footer disappears. Can't figure out how to display the footer. It doesn't need to be sticky: user needs to scroll down and see it (same as on small screens). Footer's width should be 100% of screen size.

Thank you!

Answer Source

In given code snippet positioning is off. There is some work to be done with position of each element on your page. The only node having position set is left menu and it's fixed.

The easiest fix would be to play with following css:

#footer {
   position: relative;
   clear:both;
   padding: 1rem;
   background-color: orange;
   text-align: center;
}

Remove left, bottom and right. Just add position relative and clear:both.

DEMO: https://jsfiddle.net/pLzv5sg5/14/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download