sticky footer

時間 2019-12-09

標籤 sticky footer 简体版

原文原文鏈接

如圖所示：sticky footer最後的實現效果。不管是內容的高度不足屏幕高度仍是內容的高度大於屏幕的高度，關閉按鈕都會定位在底部同一地方。css

方法一：

代碼以下所示：html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Sticky footer</title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
		<style type="text/css">
			.clearfix {
				display: inline-block;
			}
			.clearfix:after {
				display: block;
				content: '';
				height: 0;
				line-height: 0;
				clear: both;
				visibility: hidden;
			}
			
			.detail {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 100;
				overflow: auto;
				background: rgba(7, 17, 27, 0.8);
			}
			
			.detail-wrapper {
				width: 100%;
				/*讓它最小高度能充滿整個屏幕*/
				min-height: 100%;
			}
			
			.detail-main {
				margin-top: 64px;
				padding-bottom: 64px;
			}
			
			.detail-close {
				position: relative;
				width: 32px;
				height: 32px;
				clear: both;
				font-size: 32px;
				margin: -64px auto 0 auto;
			}
		</style>
	</head>

	<body>
		<div class="detail">
			<div class="detail-wrapper clearfix">
				<div class="detail-main">
					<br />	
					<br />	
					<br />	
					<br />	
				</div>
			</div>
			<div class="detail-close">
				<i class="fa fa-remove"></i>
			</div>
		</div>
	</body>
</html>
複製代碼

方法二：

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>緊貼底部的頁腳</title>
		<style type="text/css">
			body {
				display: flex;
				flex-flow: column;
				/**最小高度恰好爲視口高度*/
				min-height: 100vh;
				margin: 0;
			}
			main {
				flex: 1;
			}
		</style>
	</head>

	<body>
		<header>
			<h1>Site name</h1>
		</header>
		<main>
			<p>Bacon Ipsum dolor sit amet</p>
		</main>
		<footer>
			<p>@ 2015 No rights reserved</p>
			<p>Made with by an anonymous</p>
		</footer>
	</body>

</html>
複製代碼

最後推薦一篇很好的關於sticky footer有關的推文戳這裏bash

相關標籤/搜索

每日一句

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