使用場景：
在實際需求中經常遇到頁面底部是不固定的，如果頁面內容不夠長，頁腳塊粘貼在視窗底部；如果內容足夠長，頁腳塊會被內容向下推送。CSS Sticky Footer使得頁腳始終顯示在頁面的底部。
實現：
首先編寫一下簡單的html佈局，一個大的div作爲整個頁面的容器，內設三個div分別作爲頭部、中間內容、底部容器
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>中油燃氣集團大數據平臺</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<img src="./images/header.png" height="100%" width="100%" />
</div>
<div class="container"> </div>
<div class="footer">
<img src="./images/footer.png" height="100%" width="100%" />
</div>
</div>
</body>
<script type = "text/javascript" src="./js/jquery.js"></script>
<script type = "text/javascript" src="./js/echarts.js"></script>
<!-- <script type = "text/javascript" src="./js/index.js"></script> -->
<script type = "text/javascript">
</script>
</html>
接下來編寫css文件，爲了方便，將wrapper層div背景色改爲紅色，container層div背景色改爲綠色，並設置container層的最小高度爲1000px
*{
padding: 0;
margin:0 auto;
}
.wrapper{
height: 100%;
overflow: auto;
background:red;
}
.header{
width: 100%;
height: 75px;
}
.footer {
width: 100%;
height: 83px;
}
.container{
min-height: 1000px;
background:green;
}
*{
padding: 0;
margin:0 auto;
}
.wrapper{
height: 100%;
background:red;
}
.header{
width: 100%;
height: 75px;
}
.footer {
width: 100%;
height: 83px;
margin-top: -83px;
font-size: 0;
}
.container{
min-height: 1000px;
background:green;
padding-bottom: 83px;
}
