How To Fix Footer At Bottom Of Page With CSS
Last Updated : Mar 11, 2024
IN - CSS | Written & Updated By - Riya
In this article we will show you the solution of how to fix footer at bottom of page with css, to achieve the result everyone need four necessary properties of css.
When you are binding those styles with parent element of footer content helps to reach target.
From online may exists another method, but this easy and effective that means responsive for all screen sizes.
So you no need to optimize for each different devices screen through media query.
Step By Step Guide On How To Fix Footer At Bottom Of Page With CSS :-
In this program, we defined div tag you can choose any block level html element to consider as footer.
To create responsive perfect footer we used ‘width, position, bottom, left’ css properties with optimum values.
Those will decides the footer appearance, here you need to follow each and every line as per given example program.
Otherwise, your output will not give you responsive footer and make you pay attention to each screen size.
<!Doctype html>
<html>
<head>
<title>Fix Footer</title>
</head>
<body>
<style>
div{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background-color: aquamarine;
text-align: center;
}
</style>
<div>
<h1>Footer Blog</h1>
</div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we preferred internal css styling method to change the div element to footer and if you want to implement the same with other two methods you can do accordingly.
- First we sets width to ‘100%’, to covers the full width of screen at any size. Position set it as ‘fixed’, so it’s attached on particular position as per given requirements.
- We sets bottom and left property value to ‘0’ for no more deviations in the measurements of left and bottom side. One question will hot your mind, right? Why we setting only bottom and left direction means that’s only varying side at each device screen sizes.
- Then ‘background-color and text-align’ are optional, so you can set those with any value and also remove it if you do not need.
- At body of webpage we defined div tag with one h1 tag with text ‘Footer Blog’. That is aligned as center and you can modify it or eliminate if you not needs.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to fix footer at the bottom of page default using css.
When we execute this program on webpage of browser you can see at bottom aquamarine color footer blog with we defined text of ‘Footer Blog’.
If want to create like official website footer you need to specify more html elements with information and decent alignments.
Here we shown example helps to create responsive footer with that you need to add some official information.
I hope this article on how to fix footer at bottom of page with css helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
