CSS3中如何實(shí)現(xiàn)PC端無論頁面有沒有完全撐開把footer保持在最底部的方法

發(fā)布時間：2020-10-15 14:53:44 來源：億速云閱讀：135 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)CSS3中如何實(shí)現(xiàn)PC端無論頁面有沒有完全撐開把footer保持在最底部的方法，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

解決該問題的最好方法是采用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，該元素會占用全部可使用空間 
      而其他元素該屬性值為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將頁面結(jié)構(gòu)豎向排列，（flex默認(rèn)是橫向排列的），同時，將html 和 body 元素的高度設(shè)置為100%，使其充滿整個屏幕?！　?/p>

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

flex-grow：元素在同一容器中對可分配空間的分配比率，及擴(kuò)展比率
flex-shrink：如果空間不足，元素的收縮比率
flex-basis：元素的伸縮基準(zhǔn)值

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

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

關(guān)于CSS3中如何實(shí)現(xiàn)PC端無論頁面有沒有完全撐開把footer保持在最底部的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

CSS3中如何實(shí)現(xiàn)PC端無論頁面有沒有完全撐開把footer保持在最底部的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽