網頁不滿屏幕高度時,footer始終顯示在底部

在做B/S開發，對前端美化時，經常遇到一種情況就是，網頁不滿屏幕高度，footer不顯示在底部，各種難看，怎樣做到：

網頁不滿屏幕高度時,footer始終顯示在底部，網頁超出屏幕高度，footer自動隨網頁滾動呢 ?

其實方法有很多種，網上搜一大堆，這裏記錄其中一種做法，就是利用CSS來實現。

情況一：靜態網頁

這個屬於最簡單也是最基本的情況，一般分爲不使用第三方CSS框架和使用第三方CSS框架 ( 如 Bootstrap )，都可以直接使用CSS實現，如：

1）不使用第三方CSS框架，頁面高度不滿屏幕高度，footer固定於底部，這個最簡單：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>TEST</title>

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				font: 14px/1.8 arial;
			}
			
			html,
			body,
			.mycontent {
				height: 100%;
			}
			
			.mycontent {
				height: auto;
				min-height: 100%;
				font-size: 18px;
				text-align: center;
			}
			
			.main {
				padding-bottom: 80px;
			}
			
			.myfooter {
				position: relative;
				height: 80px;
				line-height: 80px;
				margin-top: -80px;
				background: #333;
				color: #fff;
				font-size: 16px;
				text-align: center;
			}
		</style>

	</head>

	<body>
		<div class="mycontent">
			<div class="main">

				<h1>春曉</h1>
				<p>春眠不覺曉，</p>
				<p>處處聞啼鳥。</p>
				<p>夜來風雨聲，</p>
				<p>花落知多少。</p>


			</div>
		</div>
		<div class="myfooter">
			<h1>頁面高度不滿屏幕高度，footer固定於底部</h1>
		</div>
	</body>

</html>

2）不使用第三方CSS框架，頁面高度超過屏幕高度，footer隨滾輪滾動：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>TEST</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				font: 14px/1.8 arial;
			}
			
			html,
			body,
			.mycontent {
				height: 100%;
			}
			
			.mycontent {
				height: auto;
				min-height: 100%;
				font-size: 18px;
				text-align: center;
			}
			
			.main {
				padding-bottom: 80px;
			}
			
			.myfooter {
				position: relative;
				height: 80px;
				line-height: 80px;
				margin-top: -80px;
				background: #333;
				color: #fff;
				font-size: 16px;
				text-align: center;
			}
		</style>

	</head>

	<body>
		<div class="mycontent">
			<div class="main">
    	
				<h1>春曉</h1>
				<p>春眠不覺曉，</p>
				<p>處處聞啼鳥。</p>
				<p>夜來風雨聲，</p>
				<p>花落知多少。</p>
				<br />
				<h1>小池</h1>
				<p>泉眼無聲惜細流，</p>
				<p>樹陰照水愛晴柔。</p>
				<p>小荷才露尖尖角，</p>
				<p>早有蜻蜓立上頭。</p>
				<br />
				<h1>山居秋暝</h1>
				<p>空山新雨後，</p>
				<p>天氣晚來秋。</p>
				<p>明月鬆間照，</p>
				<p>清泉石上流。</p>
				<p>竹喧歸浣女，</p>
				<p>蓮動下漁舟。</p>
				<p>隨意春芳歇，</p>
				<p>王孫自可留。</p>				
				<br />
				<h1>江雪</h1>
				<p>千山鳥飛絕，</p>
				<p>萬徑人蹤滅。</p>
				<p>孤舟蓑笠翁，</p>
				<p>獨釣寒江雪。</p>
				<br />
				<br />
				<br />
				
			</div>
		</div>
		<div class="myfooter">
			<h1>頁面高度超過屏幕高度，footer隨滾輪滾動</h1>
		</div>
	</body>

</html>

3）使用第三方CSS框架 (以 Bootstrap 爲例)，頁面高度不滿屏幕高度，footer固定於底部：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>TEST</title>
		<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
		
<style>
	* {
		margin: 0;
		padding: 0;
	}
	
	html,
	body,
	.mycontent {
		height: 100%;
	}
	
	.mycontent {
		height: auto;
		min-height: 100%;
		_height: 100%;
		padding-top: 50px;
	}
	
	.myfooter {
		position: relative;
		height: 80px;
		/*line-height儘量不要超過height高度*/
		line-height: 70px;
		margin-top: -80px;
		background: #333;
		color: #fff;
		font-size: 16px;
		text-align: center;
		vertical-align: bottom;
	}
</style>
	</head>

	<body>
		<!--導航欄部分-->
		<div class="navbar navbar-default navbar-fixed-top">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			                <span class="sr-only">Toggle navigation</span>
			                <span class="icon-bar"></span>
			                <span class="icon-bar"></span>
			                <span class="icon-bar"></span>
		    	</button>
				<a class="navbar-brand " href="javascript:;">XXX管理系統</a>
			</div>
		</div>	
			

		
		<!--內容部分-->
		<div class="container body-content mycontent">	
			<div class="row" style="text-align: center;">
				<div class="col-sm-12">
					<h1>春曉</h1>
					<p>春眠不覺曉，</p>
					<p>處處聞啼鳥。</p>
					<p>夜來風雨聲，</p>
					<p>花落知多少。</p>
					<br />
				</div>
			</div>
		</div>

		
		<!--Footer部分-->
	 <div class="myfooter hidden-print">
			<p style="font-size: 30px;">Bootstrap 頁面高度不滿屏幕高度，底部固定</p>
     </div>

	</body>

</html>

4）使用第三方CSS框架 (以 Bootstrap 爲例)，頁面高度超過屏幕高度，footer隨滾動條滾動：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>TEST</title>
		<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
		
		
<style>
	* {
		margin: 0;
		padding: 0;
	}
	
	html,
	body,
	.mycontent {
		height: 100%;
	}
	
	.mycontent {
		height: auto;
		min-height: 100%;
		_height: 100%;
		padding-top: 50px;
	}
	
	.myfooter {
		position: relative;
		height: 80px;
		/*line-height儘量不要超過height高度*/
		line-height: 70px;
		margin-top: 0px;
		background: #333;
		color: #fff;
		font-size: 16px;
		text-align: center;
	}
</style>

	</head>

	<body>
		<!--導航欄部分-->
		<div class="navbar navbar-default navbar-fixed-top ">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			                <span class="sr-only">Toggle navigation</span>
			                <span class="icon-bar"></span>
			                <span class="icon-bar"></span>
			                <span class="icon-bar"></span>
		    	</button>
				<a class="navbar-brand " href="javascript:;">XXX管理系統</a>
			</div>
		</div>	
			

		
		<!--內容部分-->
		<div class="container body-content mycontent">	
			<div class="row" style="text-align: center;">
				<div class="col-sm-12">
				<h1>春曉</h1>
				<p>春眠不覺曉，</p>
				<p>處處聞啼鳥。</p>
				<p>夜來風雨聲，</p>
				<p>花落知多少。</p>
				<br />
				<h1>小池</h1>
				<p>泉眼無聲惜細流，</p>
				<p>樹陰照水愛晴柔。</p>
				<p>小荷才露尖尖角，</p>
				<p>早有蜻蜓立上頭。</p>
				<br />
				<h1>山居秋暝</h1>
				<p>空山新雨後，</p>
				<p>天氣晚來秋。</p>
				<p>明月鬆間照，</p>
				<p>清泉石上流。</p>
				<p>竹喧歸浣女，</p>
				<p>蓮動下漁舟。</p>
				<p>隨意春芳歇，</p>
				<p>王孫自可留。</p>				
				<br />
				<h1>江雪</h1>
				<p>千山鳥飛絕，</p>
				<p>萬徑人蹤滅。</p>
				<p>孤舟蓑笠翁，</p>
				<p>獨釣寒江雪。</p>
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />

				
				</div>
			</div>
		</div>

		
		<!--Footer部分-->
	 <div class="myfooter hidden-print">
			<p style="font-size: 30px;">Bootstrap 頁面高度超過屏幕高度，footer隨滾動條滾動</p>
     </div>

	</body>

</html>

情況二：非靜態網頁

這個屬於日常遇到比較多的情況,，都可以配合使用CSS和JS實現，如：

1）簡單的網頁元素變更導致網頁高度超過屏幕高度（注意請自行添加示例中的 jquery引用）：

<!DOCTYPE html>
<html>

	<head>
		<script type="text/javascript" src="js/jquery-3.2.0.min.js" ></script>
		<meta charset="UTF-8">
		<title>TEST</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				font: 14px/1.8 arial;
			}
			
			html,
			body,
			.mycontent {
				height: 100%;
			}
			
			.mycontent {
				height: auto;
				min-height: 100%;
				font-size: 18px;
				text-align: center;
			}
			
			.main {
				padding-bottom: 80px;
			}
			
			.myfooter {
				position: relative;
				height: 80px;
				line-height: 80px;
				margin-top: -80px;
				background: #333;
				color: #fff;
				font-size: 16px;
				text-align: center;
			}
		</style>
		<script>
			function AddHtml() {

				$('.main').append("<h1>春曉</h1>")

			}
		</script>
	</head>

	<body>
		<div class="mycontent">
			<div class="main">
				<button onclick="AddHtml();">添加行信息</button>
				<h1>春曉</h1>
				<p>春眠不覺曉，</p>
				<p>處處聞啼鳥。</p>
				<p>夜來風雨聲，</p>
				<p>花落知多少。</p>
				<br />

			</div>
		</div>
		<div class="myfooter">
			<h1>CSS+JS 動態網頁footer</h1>
		</div>
	</body>

</html>

2）帶有第三方CSS框架（如 Bootstrap）的網頁元素變更導致網頁高度超過屏幕高度：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>TEST</title>
		<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
		
		
<style>
	* {
		margin: 0;
		padding: 0;
	}
	
	html,
	body,
	.mycontent {
		height: 100%;
	}
	
	.mycontent {
		height: auto;
		min-height: 100%;
		_height: 100%;
		padding-top: 50px;
	}
	
	.myfooter {
		position: relative;
		height: 80px;
		/*line-height儘量不要超過height高度*/
		line-height: 70px;
		margin-top: -80px;
		background: #333;
		color: #fff;
		font-size: 16px;
		text-align: center;
	}
</style>

<script>
	function AddHtml() {
		$('.col-sm-12').append("<h1>春曉</h1>");
		var content_top = $('.col-sm-12').offset().top;
		var content_height = $('.col-sm-12').height();
		var footer_top = $('.myfooter').offset().top;

		if(content_top + content_height >= footer_top) {
			$('.myfooter').css('margin-top', 0)
		} else {
			$('.myfooter').css('margin-top', -80)
		}
	}
</script>
	</head>

	<body>
		<!--導航欄部分-->
		<div class="navbar navbar-default navbar-fixed-top ">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			                <span class="sr-only">Toggle navigation</span>
			                <span class="icon-bar"></span>
			                <span class="icon-bar"></span>
			                <span class="icon-bar"></span>
		    	</button>
				<a class="navbar-brand " href="javascript:;">XXX管理系統</a>
			</div>
		</div>	
			

		
		<!--內容部分-->
		<div class="container body-content mycontent">	
			<div class="row" style="text-align: center;">
				<div class="col-sm-12">
				<button onclick="AddHtml();">添加行信息</button>
				<h1>春曉</h1>
				<p>春眠不覺曉，</p>
				<p>處處聞啼鳥。</p>
				<p>夜來風雨聲，</p>
				<p>花落知多少。</p>
				<br />

				
				</div>
			</div>
		</div>

		
		<!--Footer部分-->
	 <div class="myfooter hidden-print">
			<p style="font-size: 30px;">Bootstrap 頁面高度超過屏幕高度，footer隨滾動條滾動</p>
     </div>

	</body>

</html>

網頁不滿屏幕高度時,footer始終顯示在底部

MVC項目中使用Entity framework和Ninject 實現松耦合架構

C# 使用 Socket

Asp.Net 4.5網站使用IIS發佈 uploadify插件上傳文件大小問題

WPF Dispatcher.FromThread

.Net Core 防止程序多開

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結