想要頁腳一直處於頁面的底部，當內容少時，處於屏幕的底部，當頁面內容很多時，在所有內容頁腳在頁面的最底部出現。好多人可能想到讓foot的position:fixed;bottom:0px，就可以實現頁腳一直處於屏幕底部。但是這樣做有幾個缺點：
①.頁腳所處的位置好像與頁面分離了不美觀。
②.頁腳可能會遮擋一部分頁面內容。
所以爲了使頁腳一直處於頁面內容的底部，而不是始終固定在屏幕的底部。
如果這是一個完整的頁面時
<!DOCTYPE html>
<html>
<head>
<title>固定footer處於內容底部</title>
</head>
<body>
<div class = "container">
<div class = "content">
這是主體內容
</div>
<div class = "footer">
<span>這是頁腳© 2017 CSDN</span>
</div>
</div>
</body>
</html>你可以設置
html, body {
margin: 0;/*清除默認樣式*/
padding: 0;
height: 100%;
}
.container {
position: relative;
margin: 0 auto;
height: auto !important;
height: 100%;
min-height: 100%;
}
.content {
padding: 1em 1em 5em;
font-size: 30px;
}
.footer {
position: absolute; /*相對於父元素contanier定位*/
width: 100%;
bottom: 0;/*始終距離它的父元素的底部爲0px.則是處於父元素的最底*/
}
.footer{
position:relative;
width:100%;
background-color: #333;
color:#eee;
text-align: center;
font-size: 16px;
height: 50px;
}
.footer span{
line-height: 50px;
}在這裏必須要設置html和body的高度，不然直接設置內層的元素的height的百分比是不起作用的，因爲body和html是所有元素的父元素。只有設置了body和html的百分比或者固定大小的時候，設置高度百分比就會根據這兩個的大小來確定。
這裏還採用了display: flex;實現彈性佈局，即頁面最小高度爲92%（其他的8%是頁腳的區域，當內容不夠時將頁腳展示在屏幕底部）。當內容大於92%時，就會採用display: flex;佈局，將頁腳自動添加到最底部。
第二種情況，就是當你的頁面是一個片段時，怎樣來進行佈局，因爲此時沒有了body和html，沒有辦法進行百分比的設置。
<div class="header_top">
這是頁面頭部
</div>
<div class="movie-content">
頁面的主題內容
</div>
<div class="foot">
<span>這是頁腳 © 2017 csdn</span>
</div>這樣直接設置movie-content的最小高度就可以實現將頁腳始終處於屏幕的底部。（最小高度一定得填滿屏幕（除去foot））；
css樣式設置如下
.movie-content
{
min-height: 600px;
}
.foot{
position:relative;
width:100%;
background-color: #333;
color:#eee;
text-align: center;
font-size: 16px;
height: 50px;
}
.foot span{
line-height: 50px;
}這樣不管內容多少，頁腳始終會出現在屏幕合適的位置