html - 包含准确填写页面内容所需的 map 的 div

Question

我是 CSS/HTML 的新手，如果这太明显了，请原谅。除非有必要，否则我想避免对以下内容进行硬编码或使用 javascript。

我正在创建一个页面，它不应该滚动并且会准确地填充屏幕的内容。问题是，当我将 map 放到屏幕上时，内容占据的屏幕比页面高度多，并且会出现滚动条。

我在这里创建了一个显示问题的 jsfiddle，“外部”div 的高度不应超过蓝色区域大小的 70%，但 map 本身似乎总是完整的 70% 和任何其他div 添加到这个大小。

http://jsfiddle.net/Hxsm3/4/

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

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

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

我认为这会非常简单，但也许我只是找不到我正在寻找的关键字。

Answer 1

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

虽然不会花费太多...可能类似于以下内容:

$(".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这表明您可能会如何着手解决这个问题。