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

您现在的位置是: 首页 > WEB前端 > HTML中,当页面内容高度不够高时,如何让footer始终位于页面的最底部

416次阅读


一、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>