将浏览器宽高应用于div：我的div块为何不显示？求技术解答

我帮你梳理了几个最可能导致div不显示的原因，咱们一个个来排查解决：

1. 函数执行时机太早，拿不到目标div元素 #

这是最常见的问题！如果你的deviceSize()函数在页面DOM还没加载完成时就运行了，代码里获取div的语句（比如document.getElementById）会返回null，根本没法给它设置宽高。div默认宽高为0，又没有背景或边框，自然就完全看不到了。

解决办法：
把函数调用放在DOM加载完成之后，比如用DOMContentLoaded事件包裹，或者把脚本标签放在<body>的最后面：

// 等DOM完全加载后再执行函数
document.addEventListener('DOMContentLoaded', function() {
  deviceSize();
  // 额外加个窗口 resize 监听，让div尺寸跟着浏览器窗口变化
  window.addEventListener('resize', deviceSize);
});

2. div缺少可见性样式，即使有宽高也“隐身” #

就算宽高设置成功了，如果你的div没有背景色、边框这些样式，它会因为完全透明而看不到。比如给div加个浅灰色背景，立刻就能看到它的存在：

#你的divID {
  background-color: #eeeeee;
  border: 1px solid #333333; /* 可选，加边框更直观 */
}

3. 窗口尺寸计算逻辑有误 #

检查下deviceSize()里获取浏览器宽高的代码是不是正确的。正确获取视口宽高的方式应该是：

const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;

如果用了错误的属性（比如document.body.clientWidth），可能会拿到不正确的尺寸，导致div显示异常。

完整可运行示例代码 #

把这些点整合起来，代码大概是这样的：

<!DOCTYPE html>
<html>
<head>
  <style>
    #fullscreenDiv {
      background: #eee;
      border: 1px solid #333;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="fullscreenDiv"></div>

  <script>
    function deviceSize() {
      const div = document.getElementById('fullscreenDiv');
      if (!div) return; // 避免元素不存在时报错
      div.style.width = window.innerWidth + 'px';
      div.style.height = window.innerHeight + 'px';
    }

    // DOM加载完成后执行，同时监听窗口变化
    document.addEventListener('DOMContentLoaded', () => {
      deviceSize();
      window.addEventListener('resize', deviceSize);
    });
  </script>
</body>
</html>

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