コンテンツが足りなくてもフッターを画面最下部に固定する

最終更新日: 2019年02月06日

CSS・SCSS・Compass

HTML

HTMLは普通にマークアップします。

<html>
<head>
	<title>タイトル</title>
</head>
<body>
	<div id="wrap">
		<header>ヘッダー</header>
		<div id="content">
			コンテンツ
		</div><!-- /#content -->
		<footer>フッター</footer>
	</div><!-- /#wrap -->
</body>
</html>

<html>

<head>

</head>

<body>

コンテンツ

</div>

</div>

</body>

</html>

CSS

CSSでポイントとなるのはhtml,bodyにhight:100%、#wrapにmin-hight:100%を指定するところです。

html,body{
height: 100%;
}

#wrap{
min-height: 100%;
position: relative;
}

footer{
position: absolute;
bottom: 0;
width: 100%;
}

html,body{

height: 100%;

}

#wrap{

min-height: 100%;

position: relative;

}

footer{

position: absolute;

bottom: 0;

width: 100%;

}

コメントをするコメントをキャンセル

コメントはありません。

コンテンツが足りなくてもフッターを画面最下部に固定する

HTML

CSS

コメントをする コメントをキャンセル

コメント

コメントをするコメントをキャンセル