解决手机端Html中内容短定位底部，内容多定位内容下面问题

最新推荐文章于 2023-07-14 18:34:55 发布

程序员一鸣

最新推荐文章于 2023-07-14 18:34:55 发布

阅读量552

点赞数

文章标签：固定底部内容 Html固定底部内容

本文链接：https://blog.csdn.net/ming_147/article/details/105718421

版权

目前在做手机端网页时，遇到一个问题，那就是底部的内容标识，在内容少时，需要固定在底部，内容多时，就需要放置在内容区域下面，这样看着比较舒服，那怎么实现呢？

其实实现起来，很是简单，这里，我主要是，通过js来获取每个div的高度，然后再获取手机的高度，判断你的手机高度-除底部内容的高度，是否大于等于底部高度，是的话，定位到底部，否则，不定位，通过addClass的方法来实现，可以看下面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>Title</title>
    <script src="https://img.huiyiguanjia.com/CDNFile/jquery/jquery-2.1.2.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .div_banner {
            height: 200px;
            background-color: #cccccc;
            text-align: center;
            line-height: 200px;
        }

        .div_content {
            height: 400px;
            background-color: #dd4433;
            padding: 20px 0;
            text-align: center;
        }

        .div_bottom {
            width: 100%;
            height: 50px;
            background-color: coral;
            text-align: center;
            line-height: 50px;
        }

        .div_bottom_ab {
            position: absolute;
            bottom: 0;
        }

    </style>
</head>
<body>
<div>
    <div class="div_banner">
        模拟顶部内容区域
    </div>
    <div class="div_content">
        模拟中间内容区域
    </div>
    <div class="div_bottom">
        模拟底部内容展示区域
    </div>

</div>
<script>
    $(function () {
        var bannerHeight = $(".div_banner").height();
        var contentHeight = $(".div_content").height();
        var bottomHeight = $(".div_bottom").height();
        var height = $(window).height();
        var h = height - bannerHeight - contentHeight;

        if (h >= bottomHeight) {
            $(".div_bottom").addClass("div_bottom_ab");
        }
        console.log(bannerHeight + "===" + contentHeight + "==" + height + "==" + h + "===" + bottomHeight);
    });
</script>
</body>
</html>