利用CSS怎麼将頁面底部固定
釋出時間：2021-04-20 17:40:41
來源：億速雲
閱讀：89
作者：Leah
這篇文章給大家介紹利用CSS怎麼将頁面底部固定，内容非常詳細，感興趣的小夥伴們可以參考借鑒，希望對大家能有所幫助。
什麼是css
css是一種用來表現HTML或XML等檔案樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字型、顔色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單檔案中，而樣式規則的優先級由css根據這個層次結構決定，進而實作級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。
方法一：footer高度固定+絕對定位
html
Header
Content
Footer
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
}
檢視效果
方法二：在主體content上的下邊距增加一個負值等于底部高度
htmlHeader
Content
Footer
CSShtml, 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;
}
檢視效果
方法三：将頁腳的margin-top設為負數
htmlHeader
Content
Footer
CSSmain {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
header{
margin-bottom: -100px;
}
footer{
margin-top: -100px;
}
檢視效果
方法四： 通過設定flex，将footer的margin-top設定為auto
htmlHeader
Content
Footer
CSSbody{
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,footer{
line-height: 100px;
height: 100px;
}
footer{
margin-top: auto;
}
檢視效果
方法五： 通過函數calc()計算内容的高度
html代碼Header
Content
Footer
CSS代碼main{
min-height: calc(100vh - 200px);
}
header,footer{
height: 100px;
line-height: 100px;
}
檢視效果
方法六： 通過設定flexbox，将主體main設定為flex
htmlHeader
Content
Footer
CSS代碼body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
main{
flex: 1
}
檢視效果
方法七： 使用grid布局
Html代碼Header
Content
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;
}
檢視效果
方法八： display-*
htmlHeader
Content
Footer
CSSbody {
min-height: 100%;
display: table;
width: 100%;
}
main {
display: table-row;
height: 100%;
}
關于利用CSS怎麼将頁面底部固定就分享到這裡了，希望以上内容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。