CSS 使用Flex布局讓元素保持在頁面底部

在實際的開發中，遇到了一個問題，要求保持一個元素一直保持在頁面底部， 本來可是使用absolute或者fixed布局來實現，不過又有要求當頁面有滾動條時要保持在頁底。如圖所示。

要求藍色的部分一直保持在頁底，綠色的部分的高度可能會變化，當綠色的部分太高時，要求藍色的部分隨滾動條滾動並在底部。

 

可以使用JS進行調整，不過簡單的用flex布局實現。

<div class='flex-box'>
    <div class='variable'></div>
    <div class='bottom'></div>
</div>

可以讓上面的元素flex-start, 下面的元素flex-end。

.flex-box {
    display: flex;
    min-height: 100%; /×保證父節點至少占滿高度×/
    flex-flow: row wrap;/×使用行布局，並可以換行。×/
    width: 300px;
}
.variable {
    width: 100%;
    height: 100px; /×這個高度會不停改變×/
    background: green;
    align-self: flex-start;
}
.bottom {
    width: 100%;
    height: 50px;
    background: blue;
    align-self: flex-end;
}