ページ下部を固定するCSSメソッドの紹介（コード付き）

この記事では、CSSでページ下部を修正する方法を紹介します。必要な方は参考にしていただければ幸いです。

ページを作成するときに、ページのコンテンツが小さい場合、フッターがページの真ん中か何かにはみ出してしまうことがよくあります。とにかく下部に表示されないのは見苦しいです。次に説明するレイアウトは、要素をブラウザの下部に固定する方法を解決することです。フッターの高さと絶対位置

html

<div class="dui-container">
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</div>

CSS

.dui-container{
position: relative;
min-height: 100%;
}
main {
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
footer{
width: 100%;
position: absolute;
bottom: 0
}

方法 2: メイン コンテンツの下余白に次の値と等しい負の値を追加します。下部の高さ

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS

html, body {
height: 100%;
}
main {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
margin-top: -100px;
margin-bottom: -100px;
}
header, footer{
line-height: 100px;
height: 100px;
}

方法 3: フッターの上部マージンを負の数に設定します

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS

main {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
header{
margin-bottom: -100px;
}
footer{
margin-top: -100px;
}

方法 4: flex を設定して、フッターのマージン上部を auto

に設定しますhtml

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS

body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,footer{
line-height: 100px;
height: 100px;
}
footer{
margin-top: auto;
}

方法 5: 関数 calc()

html code

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

# を使用してコンテンツの高さを計算する##CSS コード

main{
min-height: calc(100vh - 200px); /* 这个200px是header和footer的高度 */
}
header,footer{
height: 100px;
line-height: 100px;
}

方法 6: フレックスボックスを設定して、本体をフレックスに設定します

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS コード

body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
main{
flex: 1
}

方法 7: グリッド レイアウトを使用する

HTML コード

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS コード

html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
.footer {
grid-row-start: 3;
grid-row-end: 4;
}

方法 8: display-*

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS

body {
  min-height: 100%;
  display: table;
  width: 100%;
}
main {
  display: table-row;
  height: 100%;
}

以上がページ下部を固定するCSSメソッドの紹介（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。