フッター固定

下記のような構成のHTMLで、記事の内容が少なかったとしてもフッターを固定するには、body と mainタグのCSSに設定を与える。

<!doctype html>
<html>
	<head>
	    <meta charset="utf-8" />
	    <title>Menu Sample</title>
	</head>

	<body>
		<header>header</header>

		<main>
		</main>

		<footer>footer</footer>
	</body>
</html>

// フッター固定
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
}

下記の設定が妥当かもしれない

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>試験操作</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>

<body>
<header>
    <div class="inner">header</div>
</header>

<main>
    
</main>


<footer>
    <div class="inner">footer</div>
</footer>
</body>
</html>

@charset "UTF-8";

// 色設定
$basic-color: #333;
$header_footer_color: #333;
// デフォルト設定
* {
    // ブラウザによって固有の設定等があるので初期化
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    // padding と border を幅と高さに含める
    box-sizing: border-box;
}

// HTML全体設定
html {
    /// スクロール設定
    scroll-behavior: smooth;
}

// 共通フォント設定
body{
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

// フッター固定
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
}

header, footer {
    display: flex;
    justify-content: center;  /* 水平方向に中央寄せ */
    align-items: center;      /* 垂直方向に中央寄せ */
    width: 100%;
    color: white;
    background-color: #333;

    .inner {
        width: 80%;
    }
}