Detailed explanation of how to place the footer at the bottom of the page in HTML5 (CSS+JS)

This article introduces the detailed explanation of the HTML5 method of placing the footer at the bottom of the page (CSS+JS) and shares it with everyone. The details are as follows:

JavaScript:

 <script type=text/javascript> $(function(){ function footerPosition(){ $(footer).removeClass(fixed-bottom); //Full text height of webpage body var contentHeight = document.body.scrollHeight, //Visible Window height, excluding the browser top toolbar winHeight = window.innerHeight; if(!(contentHeight > winHeight)){ //When the height of the web page text is less than the height of the visual window, add the fixed-bottom class to the footer $(footer).addClass(fixed-bottom); } else { $(footer).removeClass(fixed-bottom); } } footerPosition (); $(window).resize(footerPosition); });</script>

CSS:

 .fixed-bottom { position: fixed; bottom: 0; width:100%;}

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.