溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關CSS3中如何實現PC端無論頁面有沒有完全撐開把footer保持在最底部的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
解決該問題的最好方法是采用CSS3提供的一種先進布局模型 ：flexbox，可以建立具有適應性的布局。
下面我們代碼走起來
<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 設置為1，該元素會占用全部可使用空間
而其他元素該屬性值為0，因此不會得到多余的空間*/
/* 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將頁面結構豎向排列，（flex默認是橫向排列的），同時，將html 和 body 元素的高度設置為100%，使其充滿整個屏幕。
上面用到了flex包含的3個屬性，我來介紹一下他們的用途：
flex-grow：元素在同一容器中對可分配空間的分配比率，及擴展比率
flex-shrink：如果空間不足，元素的收縮比率
flex-basis：元素的伸縮基準值
也就是header 和footer 只占用他們應該占用的空間，將剩余的空間全部交給主體內容區域
好啦，到這里，無論頁面內容是多是少，都可以保證footer乖乖的待在底部了。
關于CSS3中如何實現PC端無論頁面有沒有完全撐開把footer保持在最底部的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
