フッタの下部固定


//DEMOページの色分け
body { background: #eee; }
header { background: #cff; }
main { background: #fed0e0; }
footer { background: #00ced1; }
section { background-color: #bfefdf; }
article { background-color: #fffacd; }

フッタの下部固定：1

DEMO


<body>

	<header>
		<h1>フッタ下部固定サンプル 1</h1>
	</header>

	<main>
		<section>
			<article>極少ないコンテンツ </article>
		</section>
	</main>

	<footer>
		<p class="copy"> Footer </p>
	</footer>

</body>


body {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	}
header {
	width: 100%;
	height: 5rem;
	}
main {
	flex: 1 1 auto;
	position: relative;
	width: 100%;
	padding-bottom: 5rem;
	}
footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 5rem;
	}

フッタの下部固定 ：2

DEMO


<body>

	<header>
		<h1>フッタ下部固定サンプル 2</h1>
	</header>

	<main>
		<section>
			<article>極少ないコンテンツ </article>
		</section>
	</main>

	<footer>
		<p class="copy"> Footer </p>
	</footer>

</body>


html {
	min-height: 100vh;
	margin: 0;
	padding: 0;
	}
body {
	margin-bottom: 6rem; /* footerの高さ分+余裕*/
	}
header {
	width: 100%;
	height: 5rem;
	}
main {
	flex: 1 1 auto;
	width: 100%;
	}
footer {
	position: absolute;
	bottom: 0rem;
	width: 100%;
	height: 5rem;  /* footerの高さ*/
	}

フッタの下部固定：3

DEMO


<body>

	<header>
		<h1>フッタ下部固定サンプル 3</h1>
	</header>

	<main>
		<section>
			<article>極少ないコンテンツ</article>
		</section>
	</main>

	<footer>
		<p class="copy">Footer</p>
	</footer>

</body>


html {
	height: 100%;
	}
body {
	height: 100%;
	}
footer {
	position: sticky;
	top: 100vh;
	height: 5rem;
	}
header {
	height: 5rem;
	}

フッタの下部固定：4

DEMO


<body>

	<div class="content">
		<header>
			<h1>フッタ下部固定サンプル 4</h1>
		</header>

		<main>
			<section><article>極少ないコンテンツ</article></section>
		</main>
	</div>

	<footer>
		<p class="copy">Footer</p>
	</footer>

</body>


html {
	height: 100%;
	}
body {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	margin: 0;
	padding: 0;
	}
.content {
	flex: 1;
	}
header {
	width: 100%;
	height: 5rem;
	}
footer {
	width: 100%;
	height: 5rem;
	}

フッタの下部固定(2Column) ：5

DEMO


<body>

	<header>
		<h1>フッタ下部固定サンプル 5</h1>
	</header>

	<div class="container">
		<main>
			<section><article>極少ないコンテンツ</article></section>
		</main>

		<aside>
			<p>固定幅カラム(サイドバーのコンテンツ)</p>
		</aside>
	</div>

	<footer>
		<p class="copy"> Footer </p>
	</footer>

</body>


body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	overflow-x: hidden;
	}
.container {
	display: flex;
	flex: 1;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	}
main {
	flex: 1 1 auto;
	min-width: 70%;
	}
aside {
	flex: 0 0 30%;
	}

header {
	width: 100%;
	height: 5rem;
	}
footer {
	height: 5rem;
	text-align: center;
	}

TOP