全局增加一個(gè)負(fù)值下邊距等于底部高度
有一個(gè)全局的元素包含除了底部之外的所有內(nèi)容桃焕。它有一個(gè)負(fù)值下邊距等于底部的高度。
HTML
content
CSS
html,body{height:100%;margin:0;
}
.wrapper{min-height:100%;/*?Equal?to?height?of?footer?*/
/*?But?also?accounting?for?potential?margin-bottom?of?last?child?*/
margin-bottom:?-50px;
}
.footer,
.push{height:50px;
}
演示
這個(gè)代碼需要一個(gè)額外的元素.push等于底部的高度捧毛，來(lái)防止內(nèi)容覆蓋到底部的元素观堂。這個(gè)push元素是智能的，它并沒有占用到底部的利用岖妄，而是通過(guò)全局加了一個(gè)負(fù)邊距來(lái)填充型将。
順便給大家推薦一個(gè)裙，它的前面是 537荐虐，中間是631七兜，最后就是 707。想要學(xué)習(xí)前端的小伙伴可以加入我們一起學(xué)習(xí)福扬，互相幫助腕铸。群里每天晚上都有大神免費(fèi)直播上課，如果不是想學(xué)習(xí)的小伙伴就不要加啦铛碑。（537631707）
底部元素增加負(fù)值上邊
雖然這個(gè)代碼減少了一個(gè).push的元素狠裹，但還是需要增加多一層的元素包裹內(nèi)容，并給他一個(gè)內(nèi)邊距使其等于底部的高度汽烦，防止內(nèi)容覆蓋到底部的內(nèi)容涛菠。
HTML
content
CSS
html,body{height:100%;margin:0;
}
.content{min-height:100%;
}
.content-inside{padding:20px;padding-bottom:50px;
}
.footer{height:50px;margin-top:?-50px;
}
演示
使用calc()計(jì)算內(nèi)容的高度
HTML
content
CSS
.content{min-height:calc(100vh?-?70px);
}
.footer{height:50px;
}
演示
給70px而不是50px是為了為了跟底部隔開20px，防止緊靠在一起。
使用flexbox
HTML
content
CSS
html{height:100%;
}body{min-height:100%;display:?flex;flex-direction:?column;
}
.content{flex:1;
}
演示
使用grid布局
HTML
content
CSS
html{height:100%;
}body{min-height:100%;display:?grid;grid-template-rows:1fr?auto;
}
.footer{grid-row-start:2;grid-row-end:3;
}
演示
grid早于flexbox出現(xiàn)俗冻，但并沒有flexbox被廣泛支持礁叔，你可能在chrome? Canary或者Firefox開發(fā)版上才可以看見效果
