App下載

CSS如何固定底部內容？附源碼！

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

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

實現(xiàn)效果：

CSS固定底部內容

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

實現(xiàn)原理：

我們使用?flex-grow?來控制一個 flex 元素相對它同等級 flex 元素的自身可擴展空間，將它的值設為?1?或者?auto?，那么內容就會自動填充滿頭部和底部之外的所有空間。

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

實現(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>頭部內容</h1>
	</nav>
	<main>
		<p>內容填充</p>
	</main>
	<footer>
		<h1>底部內容</h1>
	</footer>
</div>
</body>
</html>

以上就是文章“CSS 如何固定底部內容？附源碼！”的全部內容。更多 CSS 技術文章學習請前往 w3cschool。


CSS

0 人點贊