頁(yè)腳置底（Sticky footer） 就是讓網(wǎng)頁(yè)的footer部分始終在瀏覽器窗口的底部。
當(dāng)網(wǎng)頁(yè)內(nèi)容足夠長(zhǎng)以至超出瀏覽器可視高度時(shí)邦鲫，頁(yè)腳會(huì)隨著內(nèi)容被推到網(wǎng)頁(yè)底部碘箍； 但如果網(wǎng)頁(yè)內(nèi)容不夠長(zhǎng)匾鸥，置底的頁(yè)腳就會(huì)保持在瀏覽器窗口底部。
方法一：
main的margin-bottom屬性為負(fù)
html：
<div class="main">
<!-- 內(nèi)容 -->
</div>
<div class="footer"></div>
css：
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.main {
min-height: 100%;
background: #aaa;
margin-bottom: -50px;
padding-bottom: 50px;
}
.footer {
height: 50px;
background: #fff;
}
方法二：
footer的margin-top屬性為負(fù)
html：
<div class="main">
<!-- 內(nèi)容 -->
</div>
<div class="footer"></div>
css：
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.main {
min-height: 100%;
background: #aaa;
padding-bottom: 50px;
}
.footer {
height: 50px;
background: #fff;
margin-top:-50px;
}
方法三：
flexbox彈性盒布局
html：
<div class="main">
<!-- 內(nèi)容 -->
</div>
<div class="footer"></div>
css：
html{
height: 100%;
}
body{
margin:0;
padding:0;
display: flex;
flex-direction:column;
min-height: 100%;
}
.main{
flex:1;
background:#aaa;
}
.footer{
height: 50px;
background:#fff;
}
方法四：
grid網(wǎng)格布局
html：
<div class="main">
<!-- 內(nèi)容 -->
</div>
<div class="footer"></div>
css：
html{
height: 100%;
}
body{
margin:0;
padding:0;
display: grid;
grid-template-rows: 1fr;
min-height: 100%;
}
.main{
background:#aaa;
}
.footer{
height: 50px;
background:lightblue;
}
