CSS スティッキーフッタークラシックレイアウトの実装

<div class="コンテナ">
  <div class="content">コンテンツ</div>
  <div class="footer">フッ​​ター</div>
</div>

体 {
  マージン: 0;
}
。容器 {
  ディスプレイ: フレックス;
  flex-direction: 列;
  最小高さ: 100vh;
}
。コンテンツ {
  フレックス: 1;
  /*必須ではありません*/
  幅: 100%;
  高さ: 300px;
  行の高さ: 300px;
  テキスト配置: 中央;
  色: #fff;
  フォントサイズ: 30px;
  フォントの太さ: 太字;
  背景色: #71a8da;
  /*必須ではありません*/
}
.フッター{
  高さ: 60px;
  /*必須ではありません*/
  幅: 100%;
  行の高さ: 60px;
  テキスト配置: 中央;
  色: #fff;
  フォントサイズ: 30px;
  フォントの太さ: 太字;
  背景色: #f85f2f;
  /*必須ではありません*/
}

<div class="wrapper">
  <div class="content">コンテンツ</div>
</div>
<div class="footer">フッ​​ター</div>

体 {
  マージン: 0;
}
.ラッパー{
  幅: 100%;
  最小高さ: 100vh;
}
。コンテンツ {
  /*padding-bottom はフッターの高さと同じである必要があります*/
  パディング下部: 60px;
  /*必須ではありません*/
  幅: 100%;
  高さ: 400px;
  行の高さ: 400px;
  テキスト配置: 中央;
  色: #fff;
  フォントサイズ: 30px;
  フォントの太さ: 太字;
  背景色: #71a8da;
  /*必須ではありません*/
}
.フッター{
  /*margin-top はフッターの高さの負の値と同じである必要があります*/
  上マージン: -60px;
  高さ: 60px;
  /*必須ではありません*/
  幅: 100%;
  行の高さ: 60px;
  テキスト配置: 中央;
  色: #fff;
  フォントサイズ: 30px;
  フォントの太さ: 太字;
  背景色: #f85f2f;
  /*必須ではありません*/
}