Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Simple and Responsive Sticky footer through CSS and JavaScript

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 205
    Comment on it

    Here I created a simple and responsive Sticky footer for any screen size or device. In this sticky footer, I used JavaScript code to get the height of document and footer.

    I build this sticky footer to avoid the huge code packet and plugin files. This sticky footer only includes jQuery minified file and the jquery code.

    Below I provided the code.

    HTML Code

     

     <!-- =Header Frame start= -->
     <div class="header-frame">
      <label>Header Frame</label>
     </div><!-- =Header Frame End//= -->
    
     <!-- =Middle Frame start= -->
     <div class="middle-frame" style="background: #a9c9ea; height: 1100px;">
      <label>Middle Frame</label>
     </div><!-- =Middle Frame End//= -->
    
     <!-- =Footer Frame start= -->
     <div class="footer-frame">
      <label>Footer Frame</label>
     </div><!-- =Footer Frame End//= -->
    
    

    JavaScript Code

    
    $(window).resize(function() {
      var pageHeight = $(document).innerHeight();
      var footerHeight = $('.footer-frame').innerHeight();
      var topPos = $('.footer-frame').css('top', pageHeight - footerHeight);
    });
    
    $(function(){
      var pageHeight = $(document).innerHeight();
      var footerHeight = $('.footer-frame').innerHeight();
      var topPos = $('.footer-frame').css('top', pageHeight - footerHeight);
     
    });
    
    

    CSS Code

    
    <style type="text/css">
      body {
       margin: 0;
       padding: 0;
      }
      .header-frame {
       height: 50px;
       text-align: center;
       font-size: 30px;
       background: #cacaca;
      }
      .footer-frame {
       position: absolute;
       width: 100%;
       text-align: center;
       font-size: 30px;
       background: #cacaca;
       padding:15px 0;  
      }
     </style>
    

    If anyone have any query or suggestion, you can share with me, I really happy to know your words on it.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: