CSS Keep Footer at Bottom with Expanding Content

user_8351290 0
Viewed 2262

I am building a page HERE and I'm having trouble with the footer. I've done a lot of research looking at sticky footers and wrapping everything in containers... and my head is spinning.

The goal of the site is to display the song lyrics on the right as the title is clicked on the left, and it works miraculously well. The problem is that the footer doesn't move with the lyrics...

Your help is much appreciated!

footer css html
2 Answers

When you used position:absolute for any element then you must add to position:relative their parent element otherwise it not work. 

body {
    position: relative;
    padding-bottom: 50px;
}

Or If you don't want add this in body then just wrap all the divs on one parent div like .wrapper and this css in that.

<div class="wrapper">
   <div class="header"></div>
   <div class="banner"></div>
   <div class="container clearfix"></div>
   <footer></footer>
<div>

Also add clearfix class in container div because its have float element

user_62846610

You can fix or make a sticky footer by using CSS or you can just put this CSS for you footer. 

.footer-class{
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   z-index: 999;
}
  • Position is fixed for footer will never move in any page.
  • bottom 0 will fixed the footer at the bottom.
  • left and right 0 will placed the footer in the screen.
  • Width 100% will show the full width.
  • z-index will show at the front. Placed everything will behind the footer.
user_70917060
Related