CSS：頁腳緊貼底部

時間 2019-11-13

標籤 css 頁腳緊貼底部欄目 CSS 简体版

原文原文鏈接

個人練習來源於《CSS揭祕》這本書第7章-41緊貼底部的頁腳這部份內容以及書中提到的連接。css

方案一html

描述：如下方案簡單、乾淨、現代而且沒有hack，適用於IE8+, Chrome, Firefox, Opera等瀏覽器；不須要使用任何標籤包裹，由於它是基於可變的body高度；這個解決方案誕生於2012年初，今天也許應該使用更好的方案好比flexbox。git

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>css緊貼底部的頁腳</title>
</head>
<style type="text/css">
/*footer緊貼底部的主要代碼*/
html{
	position: relative;
	min-height: 100%; 
}
body{
	margin: 0 0 100px;
}
footer{
	position: absolute;
	left: 0;
	bottom: 0;
	height: 50px;
	width: 100%;
	background-color: green;/*設置顏色方便查看footer位置*/
}
/*調整內容的高度以查看footer緊貼底部的效果*/
.content{
	height: 100px;
}	
</style>
<body>
	<div class="content"></div>
	<footer></footer>
</body>
</html>

方案二github

描述：使用display的flex屬性瀏覽器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>css緊貼底部的頁腳</title>
</head>
<style type="text/css">
/*footer緊貼底部的主要代碼*/
body{
	margin: 0;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}
footer{
	height: 50px;
	width: 100%;
	background-color: green;/*設置顏色方便查看footer位置*/
}
.content{
	flex: 1;
}	
</style>
<body>
	<div class="content"></div>
	<footer></footer>
</body>
</html>

方案三flex

描述：使用 calc()方法flexbox

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>css緊貼底部的頁腳</title>
</head>
<style type="text/css">
/*footer緊貼底部的主要代碼*/
body{
	margin: 0;
}
footer{
	height: 50px;
	width: 100%;
	background-color: green;/*設置顏色方便查看footer位置*/
}
.content{
	min-height: calc(100vh - 50px);
}	
</style>
<body>
	<div class="content">
		<div style="height:1000px;">這個div用來撐高度的</div>
	</div>
	<footer></footer>
</body>
</html>

（未完待續……）spa

參考：pwa

http://mystrd.at/modern-clean-css-sticky-footer/【Modern Clean CSS 「Sticky Footer」】
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/【Sticky Footer】
http://blog.sina.com.cn/s/blog_4c1e6a010102v6jp.html【vh是相對視口的高度】

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。