1. 程式人生 > >網頁底部固定的幾種方式

網頁底部固定的幾種方式

####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; }