纯css实现内容不足时页脚在底部

发布于 2020-09-23 21:25:37 阅读 2725 次暂无评论

当页面的内容较少时，你会发现页脚并没有在页面的底部。那么如何在内容不足时让页面始终在底部呢？你可能会说用fixed定位，只要设置bottom:0就会在底部了，那么此时当页面内容增多出现滚动条的时候，页脚就始终固定在底部不动。而我们想要的结果是当页面内容增多时，页脚会被压下去随着页面往下滚动。那么用纯css如何实现呢？

一、html代码

<body>
    <div id="page">
        <div class="header"></div>
        <div clas="main"></div>
        <div class="footer"></div>
    </div>
</body>

二、css代码

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body {
    height: 100%;
}
#page {
    min-height: 100%;
    position: relative;
    padding-bottom: 80px;
}
.header{
    height: 50px;
    background-color: dodgerblue;
}
.footer {
    height: 50px;
    background-color: #19212a;
    position: absolute;
    bottom: 0;
    width: 100%;
}

三、效果图

其中蓝色为页头，黑色的为页脚。只需几行css代码便实现了内容不足时页脚距底。

发表评论取消回复