关注我

    我的微信
在线咨询 x
在线咨询
有什么可以帮到你
点击咨询

HTML中,当页面内容高度不够高时,如何让footer始终位于页面的最底部

简介当我们在写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>