Css 获取Google地图以填充包含内容的主容器

我有一个引导3的解决方案。我有一个页眉和页脚，页眉和页脚之间有一个全宽的容器。在这个全宽容器中，我需要在浏览器的整个高度嵌入一个谷歌地图，但地图上方是一些内容，例如标题或切换开关

[编辑]页眉和页脚高度固定，并固定在浏览器的顶部和底部。我希望在浏览器的中间部分填充剩余的空间

我已经找到了这个解决方案，它很好地填充了页面，但我无法在地图上方找到标题。

提前谢谢

$（函数（）{
var mapDiv=document.getElementById（“映射画布”）；
///设置贴图的控件选项
变量选择={
位置：google.maps.ControlPosition.TOP\u右上角，
样式：google.maps.ZoomControlStyle.SMALL
};
///使用已传递坐标的地图位置，否则不执行任何操作。
var pos=新的google.maps.LatLng（40.716948，-74.003563）；
///使用上述控制选项设置基本贴图选项
变量选项={
缩放：10，
zoomControlOptions:ZoOptions，
mapTypeId:google.maps.mapTypeId.TERRAIN，
中心：pos
};
this.map=new google.maps.map（mapDiv，options）；
})

html，主体，.container流体，#映射#画布{
身高：100%；
}
.容器液体{
宽度：100%；
位置：绝对位置；
排名：0；
填充：0；
}
#地图标题{
高度：50px；
}
#地图画布{
边框顶部：50px实心#fff；
边框底部：20px实心#fff；
底部：50px；
}
标题{
高度：50px；
}
页脚{
高度：20px；
}
#地图容器{
位置：固定；
顶部：50px；
左：0；
底部：50px；
右：0；
}

菜单等
这是地图内容的一部分
页脚材料

根据我从评论中获得的信息，这里有一个解决方案

当您将“位置固定”放置在地图上时，它将从文档流中删除，并且不会附加到除浏览器本身之外的任何内容。您需要稍微修改一下CSS

正文{
位置：相对位置；
溢出：隐藏；
}

您的

容器流体

也需要此CSS

。容器流体{
位置：绝对位置；
排名：0；
填充：0；
宽度：100%；
身高：100%；
}

这应该可以解决问题

---

您可以阅读有关定位和

您需要的地图上的

菜单和etc

，就像“地图”和

卫星

选项卡一样，对吗？我们需要更清楚地了解您真正想要实现的目标。@Miletadlovic-页眉和页脚是固定的。贴图容器是流体部分。因此，当您增加浏览器的大小时，页眉和页脚保持固定在顶部和底部，但地图容器的大小会增加或减小以填充中间。目前，它的工作方式与您提供的小提琴上的工作方式类似。你们想把地图放在页眉和页脚下面吗？哦，等等。你想用屏幕缩放整个地图吗？您希望整个地图始终可见吗？你想让它缩放宽度和高度吗？