26Jan2019

【CSS】親要素やブラウザウィンドウの最下部に固定する方法

CSSで特定要素やフッターを親要素となるブラウザウィンドウ等の最下部に下寄せして固定する方法を解説。HTMLとCSSのサンプルコードも掲載していますのでコピー・アンド・ペーストで利用出来ます。

この記事は約分で読めます。（文字）

親要素の最下部に固定

まず、親要素の最下部に特定要素を固定する方法解説します。

解説用に利用するhtmlのサンプルコードは以下の通りです。理解しやすいように親要素と子要素のみにしています。

htmlサンプルコード

<div class="wrapper">

	<p>親要素内</p>

	<div class="container">

		<p>子要素内</p>

	</div>

</div>

CSSは以下のようになります。

CSSサンプルコード

.wrapper {

	position: relative;

	padding-bottom: 3rem;

}

.container {

	position: absolute;

	bottom: 0;

}

親要素は『position: relative;』。

position: relative;

子要素は『position: absolute;』にして『bottom: 0;』にする事で親要素の最下部に固定されます。

position: absolute;

bottom: 0;

このままでは親要素に子要素が被ってしまいますので最後に調整しておきましょう。今回は親要素の内容が増減しても対応しやすいように『padding-bottom』で調整してきました。その他のコードやデザインに合わせて適宜変更してください。

ブラウザウインドウ最下部への固定は『親要素の最下部に固定』方法の応用で実現することもできますが、コード内容によっては後々の調整が大変だったりしますのでもっと簡単な方法を紹介します。

解説用に利用するhtmlのサンプルコードは以下の通りです。ブラウザウィンドウの最下部に固定しますので親要素は『body』にしていますが特に意識する必要はありません。

htmlサンプルコード

<body>
	<p>親要素内</p>
	<div class="container">
		<p>子要素内</p>
	</div>
</body>

CSSは以下のようになります。

CSSサンプルコード

.container {

	position: fixed;

	bottom: 0;

}

親要素は特に指定の必要がありません。

position: relative;

子要素は『position: fixed;』にして『bottom: 0;』にする事で強制的にブラウザウインドウの最下部に固定されます。

position: fixed;

bottom: 0;

こちらのケースもこのままでは親要素に子要素が被ってしまいますので最後に調整しておきましょう。その他のコードやデザインに合わせて適宜調整してください。

親要素やブラウザウインドウの最下部への固定はフッタメニューやリンクボタンの配置によく利用されます。覚えておくと便利でしょう。