Css利用fixed将body布满全屏并保持footer始终在最底部
·
博客地址
Github
Vultr $50 50美金优惠卷,注册就可以有50美金,买$5/月的可以使用10个月~~~<<<<<<快戳我
把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;
更多推荐
已为社区贡献2条内容
所有评论(0)