如何用JavaScript动态设置article高度解决移动端vh适配footer置底问题

• JS变量未正确拼接：你直接把window.innerHeight写在了CSS字符串里，CSS无法识别JS变量，这段字符串传递给浏览器后会被当成无效语法直接忽略。
• 缺少长度单位：CSS的长度值必须带单位，你计算后的数值没有添加px单位，样式规则本身不合法。
• 执行时机错误：如果代码在DOM渲染完成前就执行，document.getElementById('article')会返回null，此时设置样式自然无效，返回undefined。
• 样式优先级冲突：你原有CSS代码里加了!important，优先级高于JS设置的行内样式，也会导致JS修改不生效。

我们将逻辑封装为独立函数，添加防抖处理避免resize频繁触发性能问题，同时覆盖页面加载、窗口变化两个触发场景：

// 防抖函数，控制resize触发频率，默认200ms延迟
function debounce(func, delay = 200) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  }
}

// 核心逻辑：计算并设置article最小高度
function setArticleMinHeight() {
  const articleEle = document.getElementById('article');
  // 元素不存在直接返回，避免控制台报错
  if (!articleEle) return;
  
  const viewHeight = window.innerHeight;
  const viewWidth = window.innerWidth;
  let subtractHeight;

  // 按屏幕宽度匹配对应的减去值
  if (viewWidth >= 992) {
    subtractHeight = 250;
  } else if (viewWidth >= 768) {
    subtractHeight = 237;
  } else if (viewWidth >= 480) {
    subtractHeight = 217;
  } else {
    subtractHeight = 201;
  }

  // 直接计算最终高度，带px单位赋值
  articleEle.style.minHeight = `${viewHeight - subtractHeight}px`;
}

// 页面DOM加载完成后执行一次
document.addEventListener('DOMContentLoaded', setArticleMinHeight);
// 窗口大小变化时触发，加防抖优化
window.addEventListener('resize', debounce(setArticleMinHeight));

注意：使用前请先删除原CSS中设置article min-height的媒体查询规则，避免优先级冲突。

内容的提问来源于stack exchange，提问作者RCDAWebmaster