假設(shè)我們的頁面由三部分組成：頁眉送讲、主要內(nèi)容和頁腳播玖。無論主要內(nèi)容有多長嫌佑，頁腳總是顯示在底部是一種常見的布局强胰。
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
基本樣式：
html, body, .container {
height: 100%;
}
body {
margin: 0;
}
使用 margin
- 內(nèi)容區(qū)域的
margin-bottom為負(fù)值
.content {
min-height: 100%;
margin-bottom: -50px;
}
.footer {
height: 50px;
}
- 頁腳的
margin-top為負(fù)高度大小
main {
min-height: 100%;
}
footer {
height: 50px;
margin-top: -50px;
}
使用 calc()
main {
min-height: calc(100% - 50px);
}
footer {
height: 50px;
}
使用 flex
使用 CSS flex洛二，布局實(shí)現(xiàn)如下：
.container {
display: flex;
flex-direction: column;
}
main {
flex-grow: 1
/* flex: 1 0 auto; */
}
footer {
flex-shrink: 0;
}
設(shè)置 flex-grow: 1 為主要內(nèi)容將使其占用可用空間馋劈。
或者使用 margin: auto：
.container {
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
使用 grid
.container {
display: grid;
min-height: 100%;
grid-template-rows: auto 1fr auto;
}
sticky
footer {
position: sticky;
top: 100vh;
}
