[零碎] footer置于页面底部

2019-04-16  本文已影响0人  acsamson

footer置于底部很常用的写法, 一般就直接用absolute或者fixed来定位既可

image

方法一: 直接使用绝对定位或者fixed定位


方法二: 使用margin负值


方法三: js动态判断

$(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");
            }
        }
        footerPosition();
        $(window).resize(footerPosition);
    });
.fixed-bottom {position: fixed;bottom: 0;width:100%;}

代码来自https://segmentfault.com/a/1190000004453249


参考: https://segmentfault.com/a/1190000004453249

上一篇下一篇

猜你喜欢

热点阅读