解决悬浮<header>,<footer>遮挡内容的解决方案

最新推荐文章于 2022-10-09 14:44:24 发布

Luckly-huang

最新推荐文章于 2022-10-09 14:44:24 发布

阅读量659

点赞数

分类专栏： html5 css 文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_44122498/article/details/105114750

版权

html5 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

<body>
        <div class="contentAdd">
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
        </div>
        <div class="footer">
            <button>我是底部</button>
        </div>
</body>

当页面加载出来的时候，问题如下图：

这个时候我有下面的四种解决方案：

第一种：在包含内容的块级元素里添加padding-bottom，至于要给多少像素值的话才不会遮挡的话，取决于底部的高度为多少，比如底部footer的高度是40px，如我这里的包含内容的块级元素是contentAdd,直接就可以给它追加这个属性那就padding-bottom:40px; 或是追加margin-bottom:40px; 都可以解决问题

第二种：在包含内容的块级元素里添加伪元素:after, 比如foonter的底部高度为4rem，我这里包含内容的块级元素是contentAdd给:after添加一个height，然后就可以解决了，具体的实现代码如下：

.contentAdd::after{
            content: '';
            height: 4rem;
            width:100%;
            display: block;
        }

第三种：<footer>块之外再包裹一层div，然后再增加一个与<footer>同级的<div>块，这个<div>块的高度设置为与<footer>同样高，不包含任何内容，这样就可以起到一个占位符的效果，在页面最底占据与<footer>同样高度的空间，当然页面滑到最下方，原本的<footer>悬动块就会与这个占位块完美重叠。且不会对其他页面产生影响。

<body>
        <div class="contentAdd">
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
            <div class="content">你好呀</div>
        </div>
        <!--充当占位符的div块，无实质内容 -->
        <div style="height:60px;"></div>
        <div class="footer">
            <button>我是底部</button>
        </div>
</body>

第四种：通过js控制高度

//滚动条在Y轴上的滚动距离
    function getScrollTop(){
        　　return document.body.scrollTop;
    }
    //文档的总高度
    function getScrollHeight(){

        　　return document.body.clientHeight;
    }
    //浏览器视口的高度
    function getWindowHeight(){
        var windowHeight = 0;
　　　　 if(document.compatMode == "CSS1Compat")
　　　　{
　　　　 　　windowHeight = document.documentElement.clientHeight;
　　　　}
　　　　else
　　   {
　　　　　　windowHeight = document.body.clientHeight;
　　　　}
　　　　return windowHeight;
    }

    //滑动监听
　　window.onscroll = function(){
       //滑到底部时footer定于最下方,假定<footer>的height为60
       if((getScrollHeight() - getScrollTop() - getWindowHeight()) > 61)    
           $('.footer').css('position','fixed');        
       else
           $('.footer').css('position','relative');
    }

Luckly-huang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决悬浮<header>,<footer>遮挡内容的解决方案

<body> <div class="contentAdd"> <div class="content">你好呀</div> <div class="content">你好呀</div> <div class="content"&g...
复制链接

扫一扫