Many web developer always think about why footer is not sticking to end of browser.

This is senorio:
If content is less then footer need to go bottom of browser and if content is more then footer will go down as per content.

Many people think this is CSS developer’s But I am not think that way. Becasue this is totally different problem.

Some people suggest to use header, middle container and footer height in percentage. But that is wont be possible for all the time.

Here I will give you the solution. Use following javascript in document.

<script type="text/javascript">
 var header_height = 150;
 var footer_height = 100;
var reduce_height = header_height+footer_height;
 browserHeight = 0;
 if( typeof( window.innerHeight ) == 'number' ) {
 browserHeight = window.innerHeight;
 } else if( document.documentElement && (  document.documentElement.clientHeight ) ) {
 //IE 6+ in 'standards compliant mode'
 browserHeight = document.documentElement.clientHeight;
 } else if( document.body && (  document.body.clientHeight ) ) {
 //IE 4 compatible
 browserHeight = document.body.clientHeight;
 // window.alert( 'Height = ' + browserHeight );
 var min_height = browserHeight-reduce_height+ +"px"
 document.write('<style>#middle_container{min-height:'+ min_height +'}</style>');
 //document.getElementById("middle_container").style.minHeight = browserHeight-146+"px";

Here in this javscript I am assuming middle_container is your main block of content. You can change the variables as per your need.

Written by Purab Kharat

I Purab am from India, Pune. I am WordPress and Drupal Architect and consultant. I worked on many technologies like Ruby on Rails, Flex, PHP, jQuery etc... Senior Technical Lead at Smartsourcing Global Pvt Ltd in Princeton, NJ, USA.I contributed to many wordpress plugins and Drupal Modules. I contributed to Drupal core also.Connect to purab on LinkedIn or Follow @purab on Twitter or Follow me on Google+ or Write Mail to or Chat with me on Skype : purabdk

Leave a Comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>