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

HTML Web Development Front End Technology

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>