寫界面時幾乎每一個界面都會有頂部、中間內容、底部三個部分。
在寫底部時，我們總是需要底部總是在最底下的部分。我常常會出現這樣的情況：把一個個盒子按順序寫下去並所寫的界面的頂部還有內容部分已經佔滿了整個頁面，所以會很自然的把footer的盒子直接放在前面的盒子後面。
- 當前面內容的盒子足夠大，足以撐開元素到瀏覽器底部時，緊跟在後面的footer盒子也會排在其後不用做任何處理就實現了footer在底部的操作。如下圖左所示
當前面內容盒子不足以撐起到瀏覽器底部，如下圖右所示，footer的下面大量留白。也就不能起到保持在最底部的作用了。
解決方法
1. 適用於footer前面內容較少時的情況
在通過百度後，普遍找到了在css中加入position:absolute; bottom:0;的方法。在測試後發現這個方法在頁面有留白的時候是非常好用的。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
background: yellow;
width: 100%;
height: 100px;
}
.content{
background:orange;
width:100%;
height:800px;
}
.footer{
background:gold;
width:100%;
height:100px;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="header">
<h1> header</h1>
</div>
<div class="content">
<h1>內容</h1>
</div>
<div class="footer">
<h1>footer</h1>
</div>
</body>
</html>
從上圖左看出。當出現內容盒子不足以佔滿整個可視區域時。確實是能夠使footer始終保持在界面的最底部，即使窗口變大或變小也不會動搖footer的最底部位置。
但隨之而來也有一個小問題，當content部分的內容多於頁面所能展示內容時，就會發生上圖右的情況。content的內容在鼠標未下滑時和圖左的顯示一樣，但是拖到後面的時候卻發現，footer硬生生的把content隔開，並遮住了這一部分的內容。
- 產生這個問題的原因主要還是歸咎於absolute的定位問題。
這個網址非常清晰向我們解釋了，position:absolute中父元素的相關問題。position相對於祖先元素的定位
- 產生這個問題的原因主要還是歸咎於absolute的定位問題。
在設置
position:absolute時，前面沒有人爲地設置祖先元素。 如果沒有這樣的祖先元素，則以初始包含塊進行定位，而初始包含塊並不是以或進行定位的。對於連續媒體設備（continuous media），初始包含塊的大小等於視口viewpor的大小，基點在畫布的原點（視口左上角）；對於分頁媒體（paged media），初始包含塊是頁面區域（page area）。
position:absolute; bottom:0;的時候也就相當於把footer絕對定位在了獲得的視口的底部。這也就是爲什麼footer會保持在窗口底部，並且在滾動鼠標看後面內容時，footer被固定和漂浮在內容上方的原因了。
以下來自於footer自粘五種方法+我的測試與總結
2.內容部分增加一個min-height:100%
HTML代碼
<div class="header">
<h1> header</h1>
</div>
<div class="content">
<h1>內容</h1>
<div class="push"></div>
</div>
<div class="footer">
<h1>footer</h1>
</div>css代碼
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
/*
*重要部分添加，要給body和HTML初始爲100%
*只有這樣在後面用到min-height時才能讓content部分盒子足以撐大到瀏覽器底部。*/
height:100%;
}
.header{
background: yellow;
width: 100%;
height: 100px;
}
.content{
background:orange;
width:100%;
/*增加一個min-height，使其大小爲100%，即與body同高。*/
min-height: 100%;
*height:800px;
}
.push,
.footer{
*background:gold;
opacity: 0.5;
width:100%;
height:100px;
}
</style>代碼效果：
①body、html的height設置爲100%，與視口同高；
②在footer前面定義一個大盒子包裹全部內容，並在大盒子中設置css的min-height爲100%，保證足以撐到容器底部。
③在大盒子的底部增加一個類名爲push的div，避免覆蓋footer的內容。
缺點：
①我們常常需要的底部一般是版權信息，頁面內容較少時自然是希望保持在視口的底部。但是因爲光是content內容就佔滿了整個視口，所以footer則必須滾動條下拉才能看到底部內容。
②撐破容器了body還有html，可能會對其他的內容產生影響。
3.增加一個內部div(inner-content)使得bottom-padding=(footer)height
html代碼
<div class="header">
<h1> header</h1>
</div>
<div class="content">
/*增加的inner-content*/
<div class="inner-content">
<h1>內容</h1>
</div>
</div>
<div class="footer">
<h1>footer</h1>
</div><style type="text/css">
html,body{
height:100%;
}
/*
* content保持不變
*/
.content{
/*增加一個min-height*/
min-height: 100%;
}
.inner-content{
background:green;
opacity:0.2;
padding: 20px;
padding-bottom: 100px;
}
.footer{
height:100px;
margin-top: -100px;
}
</style>演示效果：
①優化了方法2，使得內容較少的時候不用翻頁去看footer
②刪去了方法2中的.push盒子，取而代之的是包裹內容的一個inner-content與footer高度相等的padding-bottom，避免footer覆蓋內容。
4.使用calc()計算內容的高度
這是我現在常在使用的方法。
html
<div class="content">
<h1>content</h1>
</div>
<div class="footer">
<h1>footer</h1>
</div>css代碼
<style type="text/css">
html,body{
height:100%;
}
.content{
/*min-height從100%變成calc(100vh - 70px)*/
min-height: calc(100vh - 1.00px);
}
.inner-content{
background:green;
opacity:0.2;
padding: 20px;
padding-bottom: 100px;
}
.footer{
height:100px;
}
</style>
①運用calc(100vh - 其他塊的大小)作爲min-height，使得即使內容不夠撐滿窗口時，使得footer 剛好 在視口底部位置。
②刪去了push、inner-content這些無實際意義的塊。
缺點：
需要計算其他塊的高度。