告訴你一個將 footer 保持在底部的最好方法
阿新 • • 發佈：2017-12-03
方向 區域 box 主體 底部 我們 css lex htm
/* 和 header 一樣，footer 也采用固定高度*/
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
} 最終的效果如下圖所示。通過點擊中央的粉紅按鈕改變主體內容，footer 會始終顯示在頁面的最底部。
解決該問題的最好方法是采用 flexbox——CSS3提供的一種先進布局模型，旨在建立具有適應性的布局。如果你對 flexbox 還不怎麽熟悉，文章最後有一些擴展閱讀鏈接，可以幫助你了解 flexbox。
我們的演示頁面應該具備 Header、主體內容區域和 Footer，下面是該頁面的 HTML
<body>
<header>...</header>
<section class="main-content">...</section>
<footer>...</footer>
</body>
為了啟用 flex模式，我們將 body 的 display 屬性設置為 flex, 然後將方向屬性設置為列, （默認是行，也就是橫向布局）。同時，將html 和 body 元素的高度設置為100%，使其充滿整個屏幕。
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
}
現在，我們需要調整各個區域占用的頁面空間，我們將通過flex 屬性來達到這一目的，該屬性實際包含了三個屬性，分別是：
- flex-grow：元素在同一容器中對可分配空間的分配比率，及擴展比率
- flex-shrink：如果空間不足，元素的收縮比率
- flex-basis：元素的伸縮基準值
我們希望 header 和footer 只占用他們應該占用的空間，將剩余的空間全部交給主體內容區域
header{
/* 我們希望 header 采用固定的高度，只占用必須的空間 */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
.main-content{
/* 將 flex-grow 設置為1，該元素會占用全部可使用空間 而其他元素該屬性值為0，因此不會得到多余的空間*/
/* 1 flex-grow, 0 flex-shrink, auto flex-basis */ /* 和 header 一樣，footer 也采用固定高度*/
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
} 最終的效果如下圖所示。通過點擊中央的粉紅按鈕改變主體內容，footer 會始終顯示在頁面的最底部。
告訴你一個將 footer 保持在底部的最好方法