网页内容高度不够时，让footer处于页面底部的方法(不是固定在底部)

PM吃瓜

发布于 2019-08-12 16:39:09

3.8K0

发布于 2019-08-12 16:39:09

文章被收录于专栏：PM吃瓜(公众号)

有时候我们的需求是，当页面内容高于可视高度时，footer跟在内容最后，下拉滚动条才会显示。当页面内容少于一页，footer显示在最底部，而不是跟着内容显示到页面中间或其他位置。

实现几个步骤即可： 1.将html，body，content的高度设置为100%。 2.给footer设置一个确定的高度，比如50px。

3.给main设置一个padding-bottom，高度大于等于50px，防止main内容被footer覆盖。 4. 将footer的margin-top设为-50px，移动到可视区域内。 5. 根据需求做简单的调整即可。

<!DOCTYPE  html>
<html>
<head>
<style type="text/css">
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.content {
    min-height: 100%;
    background: rgb(107, 238, 255);
    overflow: hidden;
}
.main {
    padding-bottom: 50px;
}
.footer {
    height: 50px;
    line-height: 50px;
    background: rgb(15, 112, 202);
    margin-top: -50px;
}
</style>
</head>
<body>
    <div class="content">
      <div class="main">main</div>
    </div>
    <div class="footer">
        footer
    </div>
</body>
<html>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-06-08，如有侵权请联系 cloudcommunity@tencent.com 删除

html