Home > Developer > Web Develop
Method one: To the HTML, body are set 100% height, determine the body under the content set min-height effective, and then set the body part min-height 100%, at this time if there is no header, footer just perfect full screen (refer to the Div Absolute Center, width and height adaptive, multi-column width adaptive "), but with these two, can only find another way, due to the high version of the browser to box-sizing support, we can be in 100% of the height through the padding to the header, footer empty two parts of the blank area, By setting a negative value equal to its own height for the header, the footer is set equal to the negative value of its own height margin-top, it is perfect to move the two back to the visible area, so the Margin-bottom Not only meet the content of a screen when the footer at the bottom, but also meet, more than one screen when the footer is open demand.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Footer always at the bottom</title></Head><style> *{margin:0;padding:0;box-sizing:Border-box; }Html,body{Height:100%;}Header{Height:60px;Margin-bottom:-60px;background:#1381cc;Color:#FFF;position:relative; } Section{background:#fff;Min-height:100%;padding:60px 0 60px;}Footer{Height:60px;Margin-top:-60px;background:#0c4367;Color:#FFF; } </style><Body> <Header></Header> < Sectionclass= "Content"> <Divstyle= "height:1000px;"></Div> </ Section> <Footerclass= "Footer"></Footer></Body></HTML>
Method Two: The part of footer is wrapped up with wrap, the internal settings padding-bottom,footer the same use margin-top, so that no use of border-box;
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Footer always at the bottom</title></Head><style> *{margin:0;padding:0; }Html,body{Height:100%;}. Wrap{Min-height:100%; }. Min{Padding-bottom:60px; }Header{Height:60px;background:#1381cc;Color:#FFF; } Section{background:#fff; }Footer{Height:60px;Margin-top:-60px;background:#0c4367;Color:#FFF; } </style><Body> <Divclass= "Wrap"> <Divclass= "min"> <Header></Header> < Sectionclass= "Content"> <Divstyle= "height:10px;"></Div> </ Section> </Div> </Div> <Footerclass= "Footer"></Footer></Body></HTML>
Three: Stronger compatibility
CSS implementation footer Fixed bottom, more than one screen automatically open
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
