首頁 >web前端 >css教學 >PC端無論頁面有沒有完全撐開把footer保持在最底部（不用定位）

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

青灯夜游轉載: 2018-10-10 16:22:542879瀏覽

最近在寫項目，有的頁面沒有占到一屏，然後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乖乖的待在底部了。

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請訪問

CSS影片教學， CSS3影片教學！

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

相關文章