How do you get the footer to stay at the bottom of a Web page in HTML?



The footer as the name suggest remains fixed in the bottom of the web page. For example, in the following page, we have a fixed footer in the bottom i.e. the footer remains even when the page is scrolled above −

To create a footer that stays in the bottom and fixed, we will use CSS.

Set the footer to stay at the bottom of a Web page using the position property

Set the footer to stay at the bottom of a Web page using the position CSS property. The footer height, background color, and text color is set like this −

height: 40px;
background: black;
color: white; 

Example

Let us now see the complete example −

<html> <head> <style> #footer { position: fixed; padding: 10px 10px 0px 10px; bottom: 0; width: 100%; height: 40px; background: black; color: white; } </style> <head> <body> <center> <div id="container"> <h2>Demo Heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ipsum mi, pretium finibus varius in, efficitur sit amet purus. Nam neque felis, efficitur vel eleifend at, posuere sed lectus. Donec laoreet tristique tortor eget varius. Vestibulum rutrum lectus dolor, id rhoncus mauris tempor vitae. Vivamus elementum dapibus ultrices. Maecenas facilisis sem nec quam fringilla, eu venenatis leo vehicula.</p> <p>Donec maximus urna nunc, vel scelerisque arcu tincidunt ultricies. Vestibulum tristique fermentum eros, a suscipit massa euismod quis. Praesent magna libero, feugiat quis magna at, bibendum faucibus mauris. Fusce at hendrerit nunc, non iaculis nisl. Integer facilisis tempor nibh eu faucibus. Ut cursus hendrerit justo, sit amet eleifend enim accumsan et. Ut lobortis massa quis leo dapibus cursus.</p> <p>Suspendisse efficitur condimentum dolor. Quisque sit amet dictum urna. Aliquam est nunc, ornare et vestibulum quis, volutpat a magna. Proin consequat lectus a tellus finibus, quis venenatis felis varius. Sed maximus, dui a accumsan imperdiet, nibh mauris facilisis metus, sed iaculis leo tellus nec augue. Maecenas ornare feugiat nunc fermentum porttitor. Sed fermentum eros at lorem venenatis, sed tempus sem varius. Maecenas lobortis enim sed pretium ultricies. Aliquam et dui suscipit, suscipit tortor id, consectetur odio. Vestibulum vel eros quis ante scelerisque suscipit imperdiet a dolor. Vivamus faucibus vitae lacus id interdum. Vivamus blandit, odio sed scelerisque gravida, nibh eros malesuada nunc, non lacinia elit risus non augue. Ut luctus tempor aliquam.</p> <div id="footer">Footer</div> </div> </center> </body> <html>

Set the footer to stay at the bottom of a Web page using the display property

In this example, we will set the footer to stay at the bottom of a Web page using the display property. Set the style for the footer −

display: table-row; 

Example

Let us see the complete example −

<html> <head> <style> html, body { height: 100%; width: 100%; margin: 0; display: table; } footer { background-color: black; color: white; display: table-row; height: 0; } </style> <head> <body> <center> <div id="container"> <h2>Demo Heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ipsum mi, pretium finibus varius in, efficitur sit amet purus. Nam neque felis, efficitur vel eleifend at, posuere sed lectus. Donec laoreet tristique tortor eget varius. Vestibulum rutrum lectus dolor, id rhoncus mauris tempor vitae. Vivamus elementum dapibus ultrices. Maecenas facilisis sem nec quam fringilla, eu venenatis leo vehicula.</p> <p>Donec maximus urna nunc, vel scelerisque arcu tincidunt ultricies. Vestibulum tristique fermentum eros, a suscipit massa euismod quis. Praesent magna libero, feugiat quis magna at, bibendum faucibus mauris. Fusce at hendrerit nunc, non iaculis nisl. Integer facilisis tempor nibh eu faucibus. Ut cursus hendrerit justo, sit amet eleifend enim accumsan et. Ut lobortis massa quis leo dapibus cursus.</p> <p>Suspendisse efficitur condimentum dolor. Quisque sit amet dictum urna. Aliquam est nunc, ornare et vestibulum quis, volutpat a magna. Proin consequat lectus a tellus finibus, quis venenatis felis varius. Sed maximus, dui a accumsan imperdiet, nibh mauris facilisis metus, sed iaculis leo tellus nec augue. Maecenas ornare feugiat nunc fermentum porttitor. Sed fermentum eros at lorem venenatis, sed tempus sem varius. Maecenas lobortis enim sed pretium ultricies. Aliquam et dui suscipit, suscipit tortor id, consectetur odio. Vestibulum vel eros quis ante scelerisque suscipit imperdiet a dolor. Vivamus faucibus vitae lacus id interdum. Vivamus blandit, odio sed scelerisque gravida, nibh eros malesuada nunc, non lacinia elit risus non augue. Ut luctus tempor aliquam.</p> <p>Sed maximus, dui a accumsan imperdiet, nibh mauris facilisis metus, sed iaculis leo tellus nec augue. Maecenas ornare feugiat nunc fermentum porttitor. Sed fermentum eros at lorem venenatis, sed tempus sem varius. Maecenas lobortis enim sed pretium ultricies. Aliquam et dui suscipit, suscipit tortor id, consectetur odio. </p> <footer> FOOTER<br /> This is the Footer... Sed maximus, dui a accumsan imperdiet, nibh mauris facilisis metus, sed iaculis leo tellus nec augue </footer> </center> </body> <html>

Advertisements