フッタの下部固定方法


//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 {
	position: relative;
	width: 100%;
	height: 10rem;
	margin: 0 auto;
	}
main {
	flex: 1 1 auto;
	position: relative;
	width: 100%;
	margin: 0 auto;
	}
footer {
	width: 100%;
	height: 5rem;
	margin: 0 auto;
	}

フッタの下部固定：2

DEMO


<body>

	<header>
		<h1>フッタ下部固定サンプル 2</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;
	}

フッタの下部固定：3

DEMO


<body>

	<div id="container">
		<header>
			<h1>フッタ下部固定サンプル 3</h1>
		</header>

		<main>
			<section><article>	極少ないコンテンツ ※↓足りない部分はbodyが見えている</article></section>
		</main>
	</div>

	<footer>
		<p class="copy">© <?php echo date('Y');?> OWLISH Web</p>
	</footer>

</body>


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

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

DEMO


<body>

	<header>
		<h1>Page Title</h1>
	</header>

	<div id="container">
		<main>
			<section>
				<h2>Section1 Title</h2>
				<article>
					<h3>Article1 Title</h3>
					<!--=====Contents=====-->
				</article>
			</section>
		</main>

		<aside>
			<p><!--=====Contents=====--></p>
		</aside>
	</div>

	<footer>
		<=====Footer=====>
	</footer>

</body>


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

#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%;
	}

/*[ Media Query ] --------------------------- */
@media screen and (max-width: 767.9px) {
	#container {
		display: block;
		}
	}

TOP