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.