I believe all beginning developers at some point come across this problem while building web pages. Sometimes you have too little content on your page, then your footer ‘jumps up’ and follows the rest of the content somewhere in the center of a page. See picture below.
I’ll share with you an easy way how to fix that step by step.
Markup of the page is very simple. Inside the body we have a main section and a footer. The main section contains a heading and a paragraph with some lorem ipsum text to fill in some space. As we can see the footer is in the middle of the page.
If you want you footer to be attached to the bottom of the screen and you are not going to change its content a lot you can give it a fixed height. My footer is 35px high. Basic styling is below.
We need just 3 lines of code to force it to the bottom of the page.
To do that we need to give our footer a position of fixed, this will take it out of the normal flow of the document. After that we can place it anywhere on the page, in our case we change its position to 0px from the bottom and 0px from the left.
Now our footer is attached to the bottom of the page.
We might think we are done now. Not yet…
As we add more content onto the page we get into trouble. In our case I’ll add more lorem ipsum text so that it reaches the bottom. As we do that we find out that we don’t see the end of the lorem ipsum text. The footer is overlapping it. Even if you scroll to the very bottom of the page some part of the text is covered by the footer.
This can be fixed with one line of code.
We know that our footer is 35px high. It means that to be able see all the content of the section that goes before the footer we need to move the bottom of that section up by 35px. We can do that by giving our main section a margin-bottom of 35px. This way the bottom edge of our main section and the top edge of the footer are not overlapping any more, they are now attached to each other, and the content is not covered by the footer.
This is my first article that I wrote with the intention to help beginning developers to find easy solutions to common issues that 100% of beginners face.
Hopefully I’ll help you make your life easier.
More article to follow…
Top comments (0)