标题+地图+页脚使用100％高度

Question

想要为应用创建页面。我的页眉和页脚有一个固定的高度，我需要在它们之间放置一个填充100％剩余高度的地图。 我尝试了很多解决方案，没有任何成功。 谢谢 JM

UPDATE 我想使用这样的东西：http://polyetilen.lt/en/android-geolocation-application-demo-using-phonegap-jquery-mobile-and-google-maps 但是没有jQuery，只需简单而简洁的CSS。

Answer 1

我会给页眉和页脚固定位置，并在顶部和底部给出地图填充以匹配页眉/页脚。您可以使用box-sizing: border-box（和供应商前缀）并将高度设置为100％。

Answer 2

This is a simple example使用了一些jquery。它适合你吗？

var contentHeight = $("#map").height();
var newHeight = $(window).height() - $("#header").height() - $("#footer").height();
if (contentHeight < newHeight)
{
    $("#map").css("height", newHeight + "px");
}