Categories
CSS HTML

How to make HTML page footer stay at bottom of the page using CSS?

In our application or project, if the pages has less content or data, then the page footer will come up and it will not look good. Earlier to overcome this problem we need to do some work around with CSS or we have write custom java-script/jQuery code. After the introduction of Flexbox its very simple to do this. 

How to make HTML page footer stay at bottom of the page using CSS?

Most of the major browsers are supporting Flexbox. Here is the example of footer remains at bottom using CSS Flexbox:

<!DOCTYPE html>
<html>
   <head>
      <title>How to make HTML page footer stay at bottom of the page using CSS?</title>
      <style type="text/css">
         html,
         body{
         height: 100%;
         margin: 0
         }
         .box{
         display: flex;
         flex-flow: column;
         height: 100%;
         }
         .box .header{
         flex: 0 1 auto;
         background:#ddd;
         }
         .box .content{
         flex: 1 1 auto;
         }
         .box .footer{
         flex: 0 1 40px;
         background:#ddd;
         }
      </style>
   </head>
   <body>
      <div class="box">
         <div class="header">
            <p>
            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
            </p>
         </div>
         <div class="content">
            <h3>Content Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis ligula vel sapien suscipit porta. Etiam varius malesuada ex at aliquet. Praesent egestas sagittis venenatis. Maecenas lacus elit, laoreet et bibendum eu, pellentesque in urna. Nulla facilisi. Nullam dolor nibh, imperdiet in orci ac, faucibus ultricies nunc. In augue orci, feugiat eu consectetur vitae, luctus eget mauris.</p>
         </div>
         <div class="footer">
            <h4>Footer Title</h4>
         </div>
      </div>
   </body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *