详解HTML5将footer置于网页页面最底部的方式(CSS+

日期:2021-02-23 类型:科技新闻 

关键词:在线编辑图片,什么软件可以抠图,在线图片,p图软件电脑版,在线抠图

本文详细介绍了详解HTML5将footer置于网页页面最底部的方式(CSS+JS),共享给大伙儿,实际以下:

JavaScript:

<script type="text/javascript">
    $(function(){
        function footerPosition(){
            $("footer").removeClass("fixed-bottom");
                //网页页面文章正文全文高宽比
                var contentHeight = document.body.scrollHeight,
                //可视性对话框高宽比,不包含访问器顶部专用工具栏
                winHeight = window.innerHeight;
            if(!(contentHeight > winHeight)){
                //当网页页面文章正文高宽比小于可视性对话框高宽比时,为footer加上类fixed-bottom
                $("footer").addClass("fixed-bottom");
            } else {
                $("footer").removeClass("fixed-bottom");
            }
        }
        footerPosition();
        $(window).resize(footerPosition);
    });
</script>

CSS:

.fixed-bottom {
    position: fixed;
    bottom: 0;
    width:100%;
}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。