Home > Developer > Web Develop
/********************************************************************* * The HTML footer is pinned to the bottom of the screen * Description: * processed Methods seem to be more, individuals or more inclined to use JS to deal with. * * 2017-8-25 Shenzhen Longhua gen Zengjianfeng ************************************************************* *******/First, reference documents:1secure the footer at the bottom of the page by implementing the method https://segmentfault.com/a/1190000004453249second, the use of code:1. HTML:<body> 2. Css:html,body{margin:0;p adding:0;} Header{background-color: #ffe4c4;} Main{background-color: #bdb76b;} Footer{background-color: #ffc0cb;} /*dynamically add classes for footer Fixed-bottom*/ .fixed-bottom {position:fixed; Bottom:0; width: -%;} 3. JS: $ (function () {function footerposition () {$ ("Footer"). Removeclass ("Fixed-bottom"); varContentheight = Document.body.scrollHeight,//page Body Full text heightWinheight = Window.innerheight;//Visual window height, excluding browser top toolbar if(! (Contentheight >winheight)) { //adds a class for footer when the page body height is less than the visible window height fixed-bottom$("Footer"). AddClass ("Fixed-bottom"); }} footerposition (); $ (window). Resize (footerposition); });
Pin the HTML footer to the bottom of the screen
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
