【CSS】965- 5種實現(xiàn)CSS底部固定的方法
方法一：全局增加一個負值下邊距等于底部高度
<body><div class="wrapper">content<div class="push"></div></div><footer class="footer"></footer></body>
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;}
這個代碼需要一個額外的元素.push等于底部的高度，來防止內(nèi)容覆蓋到底部的元素。這個push元素是智能的，它并沒有占用到底部的利用，而是通過全局加了一個負邊距來填充。
方法二：底部元素增加負值上邊距
雖然這個代碼減少了一個.push的元素，但還是需要增加多一層的元素包裹內(nèi)容，并給他一個內(nèi)邊距使其等于底部的高度，防止內(nèi)容覆蓋到底部的內(nèi)容。
HTML代碼：
<body><div class="content"><div class="content-inside">content</div></div><footer class="footer"></footer></body>
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()計算內(nèi)容的高度
HTML
<body><div class="content">content</div><footer class="footer"></footer></body>
CSS:
.content {min-height: calc(100vh - 70px);}.footer {height: 50px;}
給70px而不是50px是為了為了跟底部隔開20px，防止緊靠在一起。
方法四：使用flexbox
HTML:
<body><div class="content">content</div><footer class="footer"></footer></body>
CSS:
html {height: 100%;}body {min-height: 100%;display: flex;flex-direction: column;}.content {flex: 1;}
方法五：使用grid布局
HTML：
<body><div class="content">content</div><footer class="footer"></footer></body>
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ā)版上才可以看見效果。
回復“加群”與大佬們一起交流學習~
點擊“閱讀原文”查看 120+ 篇原創(chuàng)文章
評論
圖片
表情