JavaScript 实现版权信息固定在页面底部

问题描述

1. 若采用 fixed 定位，则可以保持版权一直在底部。（适用于屏幕高度 > 网页真实高度）
2. 采用正常文档流，版权出现在网页底部。（适用于屏幕高度 < 网页真实高度）。否则会漂上去。

CSS 定位

.layout-copy2 {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}

JavaScript 处理兼容

function copyrightAuto() {
  let winHeight = document.body.clientHeight; //窗口高度
  let bodyHeight = document.getElementsByTagName('body')[0].clientHeight //网页高度
  if (winHeight > bodyHeight) { //窗口 > 网页
    document.getElementsByClassName('layout-copy')[0].classList.add('layout-copy2');
  } else {
    document.getElementsByClassName('layout-copy')[0].classList.remove('layout-copy2');
  }
}

调用

copyrightAuto();
window.onresize = function() { //监控窗口变化
  copyrightAuto();
}