2019獨角獸企業重金招聘Python工程師標準>>> 
我的練習來源于《CSS揭秘》這本書第7章-41緊貼底部的頁腳這部分內容以及書中提到的鏈接。
方案一
描述：以下方案簡單、干凈、現代并且沒有hack，適用于IE8+, Chrome, Firefox, Opera等瀏覽器；不需要使用任何標簽包裹，因為它是基于可變的body高度；這個解決方案誕生于2012年初，今天也許應該使用更好的方案比如flexbox。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>css緊貼底部的頁腳</title>
</head>
<style type="text/css">
/*footer緊貼底部的主要代碼*/
html{position: relative;min-height: 100%;
}
body{margin: 0 0 100px;
}
footer{position: absolute;left: 0;bottom: 0;height: 50px;width: 100%;background-color: green;/*設置顏色方便查看footer位置*/
}
/*調整內容的高度以查看footer緊貼底部的效果*/
.content{height: 100px;
}
</style>
<body><div class="content"></div><footer></footer>
</body>
</html>?
方案二
描述：使用display的flex屬性
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>css緊貼底部的頁腳</title>
</head>
<style type="text/css">
/*footer緊貼底部的主要代碼*/
body{margin: 0;display: flex;min-height: 100vh;flex-direction: column;
}
footer{height: 50px;width: 100%;background-color: green;/*設置顏色方便查看footer位置*/
}
.content{flex: 1;
}
</style>
<body><div class="content"></div><footer></footer>
</body>
</html>?
方案三
描述：使用?calc()方法
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>css緊貼底部的頁腳</title>
</head>
<style type="text/css">
/*footer緊貼底部的主要代碼*/
body{margin: 0;
}
footer{height: 50px;width: 100%;background-color: green;/*設置顏色方便查看footer位置*/
}
.content{min-height: calc(100vh - 50px);
}
</style>
<body><div class="content"><div style="height:1000px;">這個div用來撐高度的</div></div><footer></footer>
</body>
</html>（未完待續……）
參考：
- http://mystrd.at/modern-clean-css-sticky-footer/【Modern Clean CSS “Sticky Footer”】
- https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/【Sticky Footer】
- http://blog.sina.com.cn/s/blog_4c1e6a010102v6jp.html【vh是相對視口的高度】
 - 圖像復原與重建9 - 空間濾波 - 均值濾波器 - 算術平均、幾何平均、諧波平均、反諧波平均濾波器)
 - 圖像復原與重建10 - 空間濾波 - 統計排序濾波器 - 中值、最大值、最小值、中點、修正阿爾法均值濾波器)
 - 圖像復原與重建11 - 空間濾波 - 自適應濾波器 - 自適應局部降噪、自適應中值濾波器)
 - 圖像復原與重建12 - 空間濾波 - 使用頻率域濾波降低周期噪聲 - 陷波濾波、最優陷波濾波)
