CSSページ下部固定を実現する8つの方法の詳細な説明

<div class="dui-container">
<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>
</div>

.dui-コンテナ{
位置: 相対的;
最小高さ: 100%;
}
主要 {
パディング下部: 100px;
}
ヘッダー、フッター{
行の高さ: 100px;
高さ: 100px;
}
フッター{
幅: 100%;
位置: 絶対;
下: 0
}

<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>

html、本文{
高さ: 100%;
}
主要 {
最小高さ: 100%;
パディング上部: 100px;
パディング下部: 100px;
上マージン: -100px;
下マージン: -100px;
}
ヘッダー、フッター{
行の高さ: 100px;
高さ: 100px;
}

<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>

主要 {
最小高さ: 100%;
パディング上部: 100px;
パディング下部: 100px;
}
ヘッダー、フッター{
行の高さ: 100px;
高さ: 100px;
}
ヘッダ{
下マージン: -100px;
}
フッター{
上マージン: -100px;
}

<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>

体{
ディスプレイ: フレックス;
最小高さ: 100vh;
flex-direction: 列;
}
ヘッダー、フッター{
行の高さ: 100px;
高さ: 100px;
}
フッター{
上マージン: 自動;
}

<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>

主要{
min-height: calc(100vh - 200px); /* この 200px はヘッダーとフッターの高さです */
}
ヘッダー、フッター{
高さ: 100px;
行の高さ: 100px;
}

<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>

体{
ディスプレイ: フレックス;
最小高さ: 100vh;
flex-direction: 列;
}
主要{
フレックス: 1
}

<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>

html{
高さ: 100%;
}
体 {
最小高さ: 100%;
表示: グリッド;
グリッドテンプレート行: 自動 1fr 自動;
}
.フッター{
グリッド行開始: 3;
グリッド行の終了: 4;
}

<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>

体 {
  最小高さ: 100%;
  表示: テーブル;
  幅: 100%;
}
主要 {
  表示: テーブル行;
  高さ: 100%;
}