Do you always have a problem with your footer. For example when you have fewer content in our main container, the footer moves up.
I have been having this problem for a while and in this article I want to share with you how you can make your footer stay at the bottom even if you have no content at all in your main container, the footer will automatically adjust itself and stay at the bottom and will keep moving to the bottom if you continue adding more content in your main container. So let's get started.
There are several ways to achieve this, you can use flexbox or grid and in this article we will use CSS grid. It is an awesome feature which got introduced.
I'll assume in your html file you will definitely have the
1. Header Container that has header content like nav bar and such.
2. Main Container that will have your main content.
3. Footer Container that will have your footer details
We will use the example below:
Now we need to add some CSS to style our web-page and to apply the grid properties and it will be like:
In our style.css we have the three containers header, main and footer being inside our body tag. So we will have our grid styling inside our body.
We have out html height and width to be 100% so as it can cover the entire window, then we need to make set our display to grid because we will be using the grid properties.
In grid template-rows we are setting our our first container which is the header to take an auto height, so that it can adjust accordingly depending on the contents we have in it, then our seconder container which is main we are assigning it 1fr (fr is a fractional unit in CSS), so we are setting our main container to take 1 fraction of the height, this means the main container will get as high as it can get since we don't have any other fractional unit in the same container, then lastly our footer container we also assign it an auto height i.e natural height.
Output from above code is as below:
Top comments (0)