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 : #efeeea;
margin-top:0;
font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei;
}
footer{
height:60px;
position:fixed;
bottom:0;
left:0px;
width: 100%
}
main{
margin-bottom : 30px;
}
.el-header{
position: fixed;
width: 100%;
z-index: 100;
}
.contents{
margin-top: 50px;
}
.el-row{
width: 100%;
}
</style>
</head>
<body>
<div id="app">
<el-container>
<el-header>
頭部
</el-header>
<el-container class="contents">
<el-row >
<el-col :span="4">
<el-aside width="">
左邊欄
</el-aside>
</el-col>
<el-col :span="20">
<el-main>
內容
</el-main>
</el-col>
</el-row>
</el-container>
</el-container>
</div>
</body>
</html>
總結
使用 header
和footer
佈局的時候,記得使用position:fixed;