Css利用fixed將body佈滿全屏並保持footer始終在最底部
阿新 • • 發佈：2019-02-02
部落格地址
把footer固定在文章底部，按理說，應該是很簡單的事情。但是今天卻折騰了我一上午。原因是：
1.利用
position:absolute;bottom:0;來固定footer位置時，content/main內容沒超過一個螢幕（無滑動條），展示正常。超過一個螢幕（出現滑動條），展示異常。
2.按照正常堆積，若content/main內容沒有超過一個螢幕，footer會顯示在螢幕中間，顯得很突兀。
最終解決方案：
html{
min-height: 100%;
}
body{
height: 100%;
min-height: 1000px;
}
footer{
height:60px;
position:fixed;
bottom:0;
left:0px;
width: 100%
}
main{
margin-bottom: 30px;
}
完整Html佈局如下
<html lang="{{ app()->getLocale() }}">
<head>
<style>
.el-aside{
margin-top: 20px;
}
html{
min-height: 100%;
}
body{
height: 100%;
min-height: 1000px;
background-color 總結
使用 header和footer佈局的時候，記得使用position:fixed;