何為Sticky footer布局？

我們常見的網頁布局方式一般分為header（頁頭）部分,content（内容區）部分和footer（頁腳）部分。當頁頭區和内容區的内容較少時，頁腳區不是随着内容區排布而是始終顯示在螢幕的最下方。當内容區的内容較多時，頁腳能随着文檔流撐開始終顯示在頁面的最下方。這就是傳說中的Sticky footer布局。

Sticky footer布局實作

一、負 margin 布局方式

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				text-align: center;
			}
			
			html,
			body,
			.detail {
				height: 100%;
			}
			
			body>.detail {
				height: 100%;
				min-height: 100%;
			}
			
			.main {
				padding-bottom: 64px;
			}
			
			.footer {
				position: relative;
				margin-top: -64px;
				height: 64px;
				clear: both;
				background-color: red;
			}
			
			.clearfix::after {
				/* 測試于兩欄懸浮布局 */
				display: block;
				content: ".";
				height: 0;
				clear: both;
				visibility: hidden;
			}
		</style>
	</head>

	<body>
		<div class="detail">
			<div class="wrapper clearfix">
				<div class="title">
					<h1>這裡是頭部</h1>
				</div>
				<div class="main">
					<p>這裡是main content區域...</p>
					<p>這裡是main content區域...</p>
					<p>這裡是main content區域...</p>
					<p>這裡是main content區域...</p>
				</div>
			</div>
		</div>
		<div class="footer">
			<p>© 2017 No rights reserved.</p>
			<p>Made with ♥ by an anonymous pastafarian.</p>
		</div>

	</body>

</html>          <div class="main">
            <p>這裡是main content區域...</p>
            <p>這裡是main content區域...</p>
            <p>這裡是main content區域...</p>
            <p>這裡是main content區域...</p>
            </div>
        </div>
    </div>  
    <div class="footer">
        <p>© 2017 No rights reserved.</p> 
        <p>Made with ♥ by an anonymous pastafarian.</p> 
    </div>
    
    
    
複制代碼

**！！！特别說明！！！：**使用這個布局的前提，就是footer要在總的div容器之外，footer使用一個層，其它所有内容使用一個總的層。如果确實需要到添加其它同級層，那這個同級層就必須使用position:absolute進行絕對定位。

PC端效果圖：

移動端效果圖：

二、flex 布局方式

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		 * {margin: 0; padding: 0;}
body{display: flex; flex-flow: column; min-height: 100vh; overflow:auto;}
h1{font-size: 60px; text-align: center;}
p{font-size: 24px; text-align: center;}
.main{flex:1;}   /* 若不懂請看本文末尾的連結 */
footer{background-color: red;}
		</style>
	</head>

	<body>
	 <header> 
    <h1>Site name</h1> 
</header> 
<div class="main"> 
    <p>Bacon Ipsum dolor sit amet...</p> 
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p>
     <p>Bacon Ipsum dolor sit amet...</p> 
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p> <p>Bacon Ipsum dolor sit amet...</p> 
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p> <p>Bacon Ipsum dolor sit amet...</p> 
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p> <p>Bacon Ipsum dolor sit amet...</p> 
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p> <p>Bacon Ipsum dolor sit amet...</p> 
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p> <p>Bacon Ipsum dolor sit amet...</p> 
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p> <p>Bacon Ipsum dolor sit amet...</p> 
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p> <p>Bacon Ipsum dolor sit amet...</p> 
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p> <p>Bacon Ipsum dolor sit amet...</p> 
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p> <p>Bacon Ipsum dolor sit amet...</p> 
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p>
    <p>Bacon Ipsum dolor sit amet...</p>
</div> 
<footer> 
    <p>© 2017 No rights reserved.</p> 
    <p>Made with ♥ by an anonymous pastafarian.</p> 
</footer>
	</body>

</html>
複制代碼