<!doctype html>
<meta charset= "UTF-8" >
<meta name= "Author" content= "Hu Chao" >
<title>super Hu </title>
<style>
* {
margin:0;
padding:0;
}
Html,body, #wrap
{
height:100%;
}
Body > #wrap
{
Height:auto;
min-height:100%;
}
#main
{
padding-bottom:150px;
}/* Must be same height as the footer */
#footer {
position:relative;
Margin-top: -150px; /* Negative value of footer height */
height:150px;
Clear:both;
border-color:1px solid red;
background:red;
}
/* CLEAR fix*/
. clearfix:after
{content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;
}
. clearfix {display:inline-block;
}
/* Hides from IE-MAC */
. clearfix {height:1%;/*zoom:1*/
}
</style>
<body>
<div id= "Wrap" >
<div id= "main" class= "Clearfix" >
</div>
</div>
<div id= "Footer" > SAGSDHGDF
</div>
</body>
You will find that the height of the footer is reused here three times, which is critical, and three heights must use the same value. Wrap <div> 's Height property stretches itself to the full height of the window, and the negative margin raises the footer to the position of main <div> padding, because main is already in wrap, So the main padding is already part of the wrap 100% height. In this way, footer is left at the bottom of the page.
It's not finished yet, and we need to go to clearfix main <div>.
. clearfix:after {content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;}
. clearfix {Display:inline-block;}
/* Hides from Ie-mac \*/
* HTML. Clearfix {height:1%;}
Sticky Footer (Let the footer always dock at the bottom of the page, not the absolute position)
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
