2018-09-09HTML中，当页面内容高度不够高时，如何让footer始终位于页面的最底部
您现在的位置是: 首页 > WEB前端 > HTML中，当页面内容高度不够高时，如何让footer始终位于页面的最底部
364次阅读
一、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>