Javascript 调整窗口大小会为div元素留下未使用的空间

我有一个谷歌地图的高度和宽度100%的css

调整窗口大小时，我使用以下方法调整贴图的大小： 此外，通过“更多选项”按钮，侧边栏会被激活，然后地图的div（#kaart）也会调整大小

侧边栏里有一个手风琴。当这个手风琴被切换，并且它的高度超过了窗户的高度，那么又有一个树脂。但在底部有一些未使用的空间。当您关闭手风琴的som时，宽度再次改变，因为滚动条将滚动条宽度保留为未使用的空间

//Variabels
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
var buttonState = false;

$(window).resize(function() {
    // resize map when window is resized
    viewportWidth = $(window).width();
    viewportHeight = $("#sidebar").height();
    setMapDimensions();
});

//set map width according to viewport
function setMapDimensions() {
    viewportWidth = $(window).width();
    if(buttonState == true) {
        viewportHeight = $("#sidebar").height();
        $("#kaart").width(viewportWidth - 221);
        $("#kaart").height(viewportHeight);
    } else {
        viewportHeight = $(window).height();
        $("#kaart").width(viewportWidth);
        $("#kaart").height(viewportHeight);
    }
}

知道为什么吗

以下是JSFIDLE演示：

---

我只需添加以下内容即可解决此问题：

overflow-x: hidden;
overflow-y: visible;

到#侧边栏。 然后地图将不会调整大小并四处跳跃。在我看来，这也提供了更好的用户体验。很像谷歌最近对他们的Gmail界面所做的改变。和他们一样，你也应该考虑使用自定义滚动条：