App下載

CSS如何固定底部?jī)?nèi)容？附源碼！

猿友 2021-05-13 13:42:37 瀏覽數(shù) (2748)
反饋

網(wǎng)頁(yè)開(kāi)發(fā)中往往需要固定頁(yè)面頂部及底部，這類布局開(kāi)發(fā)往往應(yīng)用在后臺(tái)管理系統(tǒng)。那么 CSS 如何固定底部?jī)?nèi)容呢？這篇文章告訴你。

實(shí)現(xiàn)效果：

CSS固定底部?jī)?nèi)容

在實(shí)現(xiàn)效果圖中，我們可以清晰看到灰色部分區(qū)域即是頂部?jī)?nèi)容區(qū)域和底部?jī)?nèi)容內(nèi)容區(qū)域。我們可以往中間填充內(nèi)容。

實(shí)現(xiàn)原理：

我們使用?flex-grow?來(lái)控制一個(gè) flex 元素相對(duì)它同等級(jí) flex 元素的自身可擴(kuò)展空間，將它的值設(shè)為?1?或者?auto?，那么內(nèi)容就會(huì)自動(dòng)填充滿頭部和底部之外的所有空間。

我們還得給 footer 底部設(shè)置?flex-shrink:0?，來(lái)保證底部 footer 的大小不受影響。

實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS如何固定底部- 編程獅(w3cschool.cn)</title>
	<style type="text/css">
		* {
    		    margin: 0;
		}
		#document {
    		    height: 100vh;
	    	    display: flex;
	    	    flex-direction: column;
	   	    background: #202020;
		}
		nav, footer {
	    	    background: #ccc;
	    	    display: flex;
	    	    justify-content: center;
		}
		main {
		    color: #bdbdbd;
		    flex: auto;
		}
		footer {
		    flex-shrink: 0;
		}
		h1,p {
		    padding: 15px;
		}	
		nav > h1 {
		    color: white;
		}
		footer > h1 {
		    color: white;
}
	</style>
</head>
<body>
	<div id="document">
	<nav>
		<h1>頭部?jī)?nèi)容</h1>
	</nav>
	<main>
		<p>內(nèi)容填充</p>
	</main>
	<footer>
		<h1>底部?jī)?nèi)容</h1>
	</footer>
</div>
</body>
</html>

以上就是文章“CSS 如何固定底部?jī)?nèi)容？附源碼！”的全部?jī)?nèi)容。更多 CSS 技術(shù)文章學(xué)習(xí)請(qǐng)前往 w3cschool。


CSS

0 人點(diǎn)贊