Question

我在css中有一个高度和宽度为100％的谷歌地图。

在调整窗口大小时，我使用以下内容调整地图大小：还有更多选项按钮，侧边栏被激活，然后地图的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);
    }
}

知道为什么会这样吗？

这是jsfiddle演示：

http://jsfiddle.net/tDYcX/13/

Answer 1

我只需添加：

即可解决

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

到 #sidebar 。地图不会调整大小并跳转。在我看来，也提供了更好的用户体验。很像Google最近对Gmail界面的更改。与他们一样，您也应该考虑使用自定义滚动条：）

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

1 个答案: