8つの方法でCSSページの下部固定を実現

私たちがページを書くときによくページの内容が少ないとき、footerはページの真ん中に何を突き刺しますか?いずれにしても一番下に表示されないのは、どうせ見苦しいので、次に説明するレイアウトは、要素をブラウザの底にくっつける方法を解決することです.

方法一:footer高さ固定+絶対位置決め

html

Header
Content

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:本体contentの下マージンに負の値を増やして底の高さに等しい

html

Header
Content

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:フッターのmargin-topを負にする

html

Header
Content

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を設定することによってfooterのmargin-topをautoに設定する

html

Header
Content

CSS

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

効果の表示

方法5:関数calc()で内容の高さを計算する

htmlコード

Header
Content

CSSコード

main{
min-height: calc(100vh - 200px); /*   200px header footer    */
}
header,footer{
height: 100px;
line-height: 100px;
}

効果の表示

方法6:flexboxを設定することによって、本体mainをflexに設定する

html

Header
Content

CSSコード

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

効果の表示

方法7:gridレイアウトを使用する

Htmlコード

Header
Content

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
Content

CSS

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

効果の表示
著者:w 3 cbestフロントエンド開発
インタラクティブ:疑問があればグループディスカッション
本文はオリジナルで、著作権は作者の所有に帰属する.商業転載は@w 3 cbestフロントエンド開発に連絡して許可を得てください.非商業転載は元のリンクと出典を明記してください.