设置div以覆盖所有窗口大小，减去菜单栏高度，不使用滚动条

我试图从头开始构建滑块插件，因为我需要它具有某些在其他插件中很难找到的特定行为。无论如何，其中一个要求是它占用了页面中的所有可用空间，减去菜单栏高度。设置div以覆盖所有窗口大小，减去菜单栏高度，不使用滚动条

这是我设置了一个例子：https://jsfiddle.net/5ujqw94n/

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

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); 
}

我调整窗口大小时也调用该函数。会发生什么事情是，当页面加载时，它显示滚动条，但调整窗口大小使它们消失。

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

我不知道如何解决它。把overflow: hidden作品，但我希望另一种方法，因为这感觉像一个解决方法。

例如，在这个其他page一切似乎工作，因为我想和没有overflow: hidden在身体。

什么建议吗？

来源

2016-03-15 Carlo

我发现了一种解决方案，（至少）在铬中工作。从.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;说 ...希望它有助于反正。

来源

2016-03-15 11:55:52 Arsylum

谢谢，这真的很有帮助。我真的不需要边框，并正在使用它们进行调试。我和你一样困惑，但可能有一个很好的理由，为什么它的行为如此。顺便说一下，我还发现我可以从'slider-container'中移除'position：absolute'，并使用'margin：auto'。我更新了小提琴：https：//jsfiddle.net/5ujqw94n/1/（希望我不会错过任何其他方式） – Carlo

是的工作，因为div是隐式设置为宽度100％，其上限为960px和因此在更宽的屏幕上以边距自动为中心。我会将宽度：100％添加到滑块中的图像，尽管;-) – Arsylum

设置div以覆盖所有窗口大小，减去菜单栏高度，不使用滚动条

回答

相关问题