Question

我是CSS / HTML的新手，请原谅我这是非常明显的。除非有必要，否则我想避免硬编码或使用下面的javascript。

我正在创建一个不应滚动的页面，并将完全填充屏幕内容。问题在于，当我将地图放置在屏幕上时，内容会占用屏幕的大部分而不是页面高度，并且会出现滚动条。

我在这里创建了一个显示问题的jsfiddle，“外部”div的高度不应超过蓝色区域大小的70％，但看起来地图本身总是满70％而且任何其他divs加上这个大小。

#outer {
    ...
    height: 70%;
    width: 80%;
}

#map { 
    ...
    width: 100%;
    height:100%;
}

此外，地图周围的内容不是静态的，因此无法预先确定大小并将其硬编码到CSS中。因此，我需要让地图准确地取出填充页面其余部分所需的高度，不多也不少。

我认为这很简单，但也许我找不到我可能正在寻找的关键字。

Answer 1

如果您想在调整地图大小时动态删除页面中的元素以填充空白空间，那么您需要一些javascript来帮助动态调整地图大小。

它不会花费太多......可能类似于以下内容：

$(".maynotexist").click(function() {
    var heightDifference = $(this).height();
    $(this).remove();
    // adjust mapHeight accordingly (based on height of element removed)
    var newMapHeight = $('#map').height() + heightDifference;
    $('#map').height(newHeight);
});

我创建了一个pretty rudimentary jsfiddle example，演示了如何开始解决此问题。

div包含完全填充页面内容所需的地图

1 个答案: