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

发布于 2024-12-25 10:48:12 字数 1124 浏览 2 评论 0原文

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

当窗口大小调整时，我使用以下命令来调整地图大小：此外，使用更多选项按钮，侧边栏也会被激活，然后地图的 div (#kaart) 也会调整大小。

在侧边栏中我有一个手风琴。当这个手风琴被切换并且它的高度超过窗口高度时，就会再次调整大小。但底部有一些未使用的空间。当您关闭一些手风琴时，宽度会再次发生变化，因为滚动条将该滚动条宽度保留为未使用的空间。

//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/

原文

I have a google Maps with height and width 100% in the css.

I use the following to resize the map when the windows is resized:
also with the more options button a sidebar gets activated then also the div of the map (#kaart) resizes.

Within the sidebar I have a accordion. when this accordion is toggled and and its height exceeds the windows height then there is again a resizement. But then on the bottom there is some not used space. and when you close som of the accordions the width changes again because of the scrollbar leaving that scrollbar width as not used space.

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

Any idea why this is?

Here is the jsfiddle demo:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你不是我要的菜∠ 2025-01-01 10:48:12

我只需在

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

#sidebar 中添加：即可解决该问题。
地图将不会调整大小并跳转。我认为还提供了更好的用户体验。很像 Google 最近对其 Gmail 界面的更改。像他们一样，您也应该考虑使用自定义滚动条:)

I would solve it by just adding:

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

to #sidebar.
The map will not resize and jump around then. Also gives a better user experience in my opinion. A lot like Google's recent changes to their Gmail interface. Like theirs you should also consider using a custom scrollbar :)

回复收藏 0 原文

~没有更多了~