设置 div 以覆盖所有 window 大小，减去菜单栏高度，不带滚动条

Question

我正在尝试从头开始构建一个滑块插件，因为我需要它具有一些在其他插件中很难找到的特定行为。无论如何，其中一个要求是它需要页面中所有可用的 space，减去菜单栏高度。

要设置尺寸大小我调用这个函数：

adjustSizes: function(that) {
  var w = document.body.parentNode.clientWidth;
  var h = $(window).height() - $('header').height();
  console.log('window inner w', $(window).innerWidth());
  that.$elem.width(w);
  that.$elem.height(h);
  console.log('window inner w', $(window).innerWidth());
  console.log('document client w', document.body.parentNode.clientWidth);
}

我在调整 window 大小时也调用了该函数。发生的情况是，当页面加载时，它会显示滚动条，但调整 window 的大小会使它们消失。

在函数中，我放置了一些 console.log 来跟踪 window 宽度，并注意到应用调整大小后存在 15px 的差异。我认为这可能与滚动条有关，搜索周围似乎就是这种情况。

我不知道怎么解决。放置 overflow: hidden 种方法，但我希望有另一种方法，因为这感觉像是一种解决方法。

例如，在另一个 page 中，一切似乎都按我想要的方式工作，并且正文中没有 overflow: hidden。

有什么建议吗？

Answer 1

我找到了一种至少在铬中（有点）有效的解决方案。

删除 .page-container 的边框并修改 .slider-container

.slider-container {
    border: 0px solid yellow;
    left: 0;
    right: 0;
    height: 100%;
    max-width: 960px;
    margin: auto;
    overflow: hidden;
    position: absolute;
}

现在在上面倒一些 body { margin: 0; } 即可享用。

然而令我困惑的是为什么边框导致水平滚动条即使box-sizing: border-box;声明...希望它能有所帮助。

设置 div 以覆盖所有 window 大小，减去菜单栏高度，不带滚动条

Set div to cover all window size, minus menu bar height, without scrollbars

javascript

jquery

overflow

window-resize