如何检测使Div无横向滚动条的屏幕实际可用宽度？

你遇到的问题根源是screen.width获取的是整个物理屏幕的宽度，但浏览器的实际可用视口宽度是不一样的——它会排除浏览器边框、滚动条，甚至系统任务栏（非全屏状态下）的占用空间。下面给你几个靠谱的解决方案：

1. 用document.documentElement.clientWidth获取无滚动条的可用宽度 #

这个属性返回HTML根元素的客户端宽度，完全排除了垂直滚动条的宽度，是最贴合"刚好填满屏幕可用区域"需求的取值：

const exactWidth = document.documentElement.clientWidth;
document.querySelector('div').style.width = `${exactWidth}px`;

2. 用window.innerWidth获取含滚动条的视口宽度 #

如果你的页面可能出现垂直滚动条，且希望Div宽度包含滚动条所在的空间（避免滚动条导致Div缩窄），就用这个：

const viewportWidth = window.innerWidth;
document.querySelector('div').style.width = `${viewportWidth}px`;

3. 补全CSS重置 #

光设body { margin:0 }还不够，建议把html和body的默认内外边距都清掉，同时确保全局元素继承盒模型规则：

html, body {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}

这样可以彻底消除浏览器默认样式带来的额外宽度占用。

验证小技巧 #

你可以在浏览器控制台打印两个值对比差异：

console.log('无滚动条可用宽度:', document.documentElement.clientWidth);
console.log('含滚动条视口宽度:', window.innerWidth);

如果页面没有垂直滚动条，两者数值一致；如果有滚动条，innerWidth会比clientWidth大出滚动条的宽度（通常是15-20px左右）。

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