我正在尝试创建一个紧贴整个窗口的 div 边界(也在 JSFiddle 中):
<!doctype html>
<html>
<head>
<script type='text/javascript'>
function setupDiv() {
document.getElementById('div')
.setAttribute('style'
, 'position: absolute; top: 30px; left: 0px; width: '
+window.innerWidth +'px; height: '
+window.innerHeight+'px; border: 1px solid #ff0000');
}
window.onload = setupDiv;
</script>
</head>
<body>
<div id='div'>
</div>
</body>
</html>
不幸的是，上面的代码导致了水平和垂直 slider ，只有“北”和“西”边界线可见。虽然我当然可以手动减少这些值，但我想了解为什么会这样。
最佳答案
您可以在 CSS using box-sizing 中修复它并将 top 设置为 0px(或针对任何非零值进行调整):
这将使填充、边框和边距成为计算宽度的因素。实际上，边距、边框和宽度不计算为宽度的一部分:
<!doctype html>
<html>
<head>
<script type='text/javascript'>
function setupDiv() {
document.getElementById('div')
.setAttribute('style'
, 'position: absolute; top: 0px; left: 0px; width: '
+window.innerWidth +'px; height: '
+window.innerHeight+'px; border: 1px solid #ff0000');
}
window.onload = setupDiv;
</script>
<style>
#div { box-sizing: border-box; }
</style>
</head>
<body>
<div id='div'>
</div>
</body>
</html>关于javascript - 将 `div` 的宽度设置为 window.innerWidth 导致垂直 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34750969/