CSS絕對底部佈局 Sticky footer

時間 2019-11-08

標籤 css 絕對底部佈局 sticky footer 欄目 CSS 简体版

原文原文鏈接

何爲Sticky footer佈局？

咱們常見的網頁佈局方式通常分爲header（頁頭）部分,content（內容區）部分和footer（頁腳）部分。當頁頭區和內容區的內容較少時，頁腳區不是隨着內容區排布而是始終顯示在屏幕的最下方。當內容區的內容較多時，頁腳能隨着文檔流撐開始終顯示在頁面的最下方。這就是傳說中的Sticky footer佈局。css

Sticky footer佈局實現

1、負 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進行絕對定位。html

PC端效果圖：bash

移動端效果圖： app

2、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>
複製代碼

PC端效果圖：佈局