Home > Developer > Web Develop
FrontEnd: headers and footer are always displayed at the top and bottom of the browser, and the middle area is adaptive. frontendfooter
Ideas:
HTML:
<!DOCTYPE html>
CSS:
/* Wei Ge said this is required. This is the real project */html {height: 100%:} body {height: 100%; margin: 0 ;} /*************************************** * ******/# headBlock {height: 60px; background-color: red;} # footBlock {height: 60px; background-color: yellow ;}. body {background-color: blue; overflow-y: scroll ;}
JS:
Function reSizeBodyBlock () {"use strict"; var browserHeight = document.doc umentElement. clientHeight, headHeight = document. getElementById ("headBlock "). offsetHeight, footHeight = document. getElementById ("footBlock "). offsetHeight, bodyBlockHeight = (browserHeight-headHeight-footHeight ). toString () + "px"; // Why do I add toString ()? Because the code should be shown to more people !!!! Document. getElementById ("bodyBlock"). style. height = bodyBlockHeight;} window. onload = window. onresize = reSizeBodyBlock;
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
