最新文章
关注我
在线咨询
x
有什么可以帮到你
点击咨询
HTML中，当页面内容高度不够高时，如何让footer始终位于页面的最底部
- 分类：WEB前端
- 时间：2018-09-09
- 共837人围观
简介当我们在写html页面时，经常会遇到一个情况，当整个页面高度不足以占满显示屏一屏，页脚不是在页面最底部，我们想优化其页面效果，即想让页脚始终在页面最底部
一、html页面代码
<div class="container"> <div class="header"></div> <div class="body"> <p>这是一个p标签</p> <p>这是一个p标签</p> </div> <div class="footer">这是一个footer</div> </div>
二、footer随着滚动条的滚动而滚动
<style>
.container{
position:relative;
width:100%;
min-height:100%;
}
.body{
padding-bottom:50px;
}
.footer{
height:50px;
position:fixed;
bottom:0px;
left:0px;
}
</style>
三、footer始终在其底部固定
<style>
.container{
position:relative;
width:100%;
min-height:100%;
}
.body{
padding-bottom:50px;
}
.footer{
height:50px;
position:fixed;
bottom:0px;
left:0px;
}
</style>