Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Set The Footer Bottom Of The Page?
The HTML element <footer> acts as a footer for the element that is the closest relative and is either the sectioning content or the sectioning root element. A <footer> usually includes information about the section's author, copyright information, or links to related papers. Let’s look into simple example of <footer> element.
<footer> Some copyright info or author info </footer>
Setting the footer at the bottom of the page
Making a footer that will remain at the bottom of a website page We can adjust the position of it at the bottom of the page so that you can still see the footer even if you scroll down the page. Use position: fixed to create a footer that will always appear at the bottom of the page.
Syntax
Following is the syntax to make footer at the bottom of the page -
#footer {
position: fixed;
width: 100%;
height: 35px;
}
For getting better understanding on how to set the footer at the bottom of the page. Let’s look into the following examples.
Example
In the following example, we are creating a webpage where we are using the position: fixed property to add the footer to the bottom of the webpage.
<!DOCTYPE html>
<html>
<style>
#tutorial{
background:#D5F5E3;
}
#tutorial1 {
position: fixed;
padding: 10px 10px 0px 10px;
bottom: 0;
width: 100%;
height: 40px;
background: #D7BDE2 ;
}
</style>
<body>
<center>
<div id="tutorial">
<h1>TutorialsPoint</h1>
<div id="tutorial1">The Best E-Way Learning.
</div>
</div>
</center>
</body>
</html>
When the script gets executed, it will generate an output consisting of text applied with style, along with the text that acts as a footer, which will stay at the bottom of the webpage with a style applied.
Example
Let’s look at the following example, where we are using position: absolute to set the footer at the bottom of the page.
<!DOCTYPE html>
<html>
<body>
<style>
#container {
min-height:100%;
position:relative;
}
#tutorial {
background:#D5F5E3 ;
padding:10px;
}
#tutorial1 {
padding:10px;
padding-bottom:60px;
}
#tutorial2 {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color:#AED6F1 ;
text-align: center;
}
</style>
<div id="container">
<div id="tutorial">Choose The Course</div>
<div id="tutorial1">
<ol>
<li>HTML</li>
<li>JAVA</li>
<li>PYTHON</li>
</ol>
</div>
<div id="tutorial2">If any doubt contact us at E-mail:tp@welcome</div>
</div>
</body>
</html>
When the script is executed, an output window will appear, displaying a text along with an ordered list on the webpage and a footer text styled with CSS displayed at the bottom of the webpage.
Using Flexbox in HTML
A one-dimensional layout technique called Flexbox is used to arrange objects in rows or columns. Items can flex (extend) to take up more space or contract to fit in tighter places.
Example
Consider the following example, where we are using the flexbox for setting the footer at the bottom of the webpage.
<!DOCTYPE html>
<html>
<body>
<style>
#tutorial{
background:red;
}
#tutorial1{
min-height:100px;
display:flex;
flex-direction:column;
justify-content:space-between;
}
</style>
<div id="tutorial1">
<div>
<header>
JamesCameron
</header>
<article>
Directed Avatar2
</article>
</div>
<footer id="tutorial">
Avatar2 2022©
</footer>
</div>
</body>
</html>
On running the above script, the output window will pop up, displaying the text and a footer text that was applied with CSS and displayed at the bottom of the webpage.
1K+ Views
