ウェブサイトを制作中に、footerが浮き上がってしまう・・・
こちらでは、そんなお悩みを解決するコンテンツ量に関係なくフッターを常に最下部に固定する記述についてご紹介します。
目次
footerを最下部に固定したい場合の記述
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<main>
<!-- コンテンツの記述 -->
</main>
<footer>
<!-- フッターの記述 -->
</footer>
</div>
</body>
</html>#wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}