PC端無論頁面有沒有完全撐開把footer保持在最底部（不用定位）

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-02 22:08:49

PC端無論頁面有沒有完全撐開把footer保持在最底部（不用定位）

PC端無論頁面有沒有完全撐開把footer保持在最底部（不用定位）:最近在寫項(xiàng)目，有的頁面沒有占到一屏，然后footer也就是底部就靠上了，這樣很影響美觀，于是在網(wǎng)上找了找，下面是我的成果解決該問題的最好方法是采用CSS3提供的一種先進(jìn)布局模型：flexbox，可以建立具有適應(yīng)性的布局。下面我們代碼走起來<body&

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀PC端無論頁面有沒有完全撐開把footer保持在最底部（不用定位）:最近在寫項(xiàng)目，有的頁面沒有占到一屏，然后footer也就是底部就靠上了，這樣很影響美觀，于是在網(wǎng)上找了找，下面是我的成果解決該問題的最好方法是采用CSS3提供的一種先進(jìn)布局模型：flexbox，可以建立具有適應(yīng)性的布局。下面我們代碼走起來<body&

最近在寫項(xiàng)目，有的頁面沒有占到一屏，然后footer也就是底部就靠上了，這樣很影響美觀，于是在網(wǎng)上找了找，下面是我的成果

解決該問題的最好方法是采用CSS3提供的一種先進(jìn)布局模型：flexbox，可以建立具有適應(yīng)性的布局。

下面我們代碼走起來

<body>
	<p id="header">...</p>
	<p id="content">...</p>
	<p class="footer">...</p>
	</body>

html{
 height: 100%;
}

body{
 display: flex;
 flex-direction: column;
 height: 100%;
}

#header{
 /* 我們希望 header 采用固定的高度，只占用必須的空間 */
 /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
 flex: 0 0 auto;
}

#content{
 /* 將 flex-grow 設(shè)置為1，該元素會(huì)占用全部可使用空間 
 而其他元素該屬性值為0，因此不會(huì)得到多余的空間*/
 /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
 flex: 1 0 auto;
}

#footer{
 /* 和 header 一樣，footer 也采用固定高度*/
 /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
 flex: 0 0 auto;
}

我們利用flex-deraction：column將頁面結(jié)構(gòu)豎向排列，（flex默認(rèn)是橫向排列的），同時(shí)，將html 和 body 元素的高度設(shè)置為100%，使其充滿整個(gè)屏幕。　　

上面用到了flex包含的3個(gè)屬性，我來介紹一下他們的用途：

flex-grow：元素在同一容器中對(duì)可分配空間的分配比率，及擴(kuò)展比率

flex-shrink：如果空間不足，元素的收縮比率

flex-basis：元素的伸縮基準(zhǔn)值

也就是header 和footer 只占用他們應(yīng)該占用的空間，將剩余的空間全部交給主體內(nèi)容區(qū)域

好啦，到這里，無論頁面內(nèi)容是多是少，都可以保證footer乖乖的待在底部了。

總結(jié)：

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com