css - 页眉 + 地图 + 页脚使用 100% 高度

Question

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

更新我想使用这样的东西：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

这是一个使用一点 jquery的简单示例。能适合你吗？

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