####1,判断高度
function footerAuto() { var _wh = $(window).height(); var _dh = $(document).height(); var _bh = $(document.body).height(); if (_bh < _wh) { $("#footer").css({ position: "fixed", bottom: "0", left: "0", }) } else { $("#footer").css({ position: "static", bottom: "auto", left: "auto", }) } }
…2,判断滚动条…
function ct() { return document.compatMode == "BackCompat" ? document.body.clientHeight : document.documentElement.clientHeight; } var f = document.getElementById('footer'); (window.onresize = function() { f.style.position = document.body.scrollHeight > ct() ? 'static' : 'fixed'; f.style.left = "0"; f.style.bottom = "0"; })();
CSS方法
html { height: 100%; } body { min-height: 100%; box-sizing: border-box; padding-bottom: 120px; position: relative; } .footer { width: 100%; height: 120px; line-height: 120px; text-align: center; font-size: 24px; background-color: deeppink; position: absolute; left: 0; bottom: 0; }