Css 如何用谷歌地图自动填充页眉和页脚之间的空间？_Css_Google Maps_Html

Css 如何用谷歌地图自动填充页眉和页脚之间的空间？

css google-maps html

Css 如何用谷歌地图自动填充页眉和页脚之间的空间？,css,google-maps,html,Css,Google Maps,Html,我想创建一个网页与页眉，页脚，左栏（25%宽的列，其中包含一些按钮等）和主要内容区，必须用谷歌地图填充我试图通过以下方式修改内容： <body onload="initialize()"> <div id="wrapper"> <div id="header">Header</div> <div id="leftcolumn">Left Column</div> <div id="map_canvas"&

我想创建一个网页与页眉，页脚，左栏（25%宽的列，其中包含一些按钮等）和主要内容区，必须用谷歌地图填充

我试图通过以下方式修改内容：

<body onload="initialize()">
<div id="wrapper">
  <div id="header">Header</div>
  <div id="leftcolumn">Left Column</div>
  <div id="map_canvas"></div>
  <div id="push"></div>
</div>
<div id="footer">footer</div>

html, body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
#wrapper {
    min-height: 100%;
    height: auto;
    height: 100%;
    margin: 0 auto -100px;
    background-color: red;
    border: 1px solid black;
  }

#header {
background: #438a48;
height:100px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 25%;
height:auto;
height:100%;

}

#map_canvas {
background: #000;
float: right;
width: 75%;
height:100%;
}

#footer, #push {
background: #df781c;
height:100px;
}


标题
左列
页脚
html，正文{
边际：0px；
填充：0px；
身高：100%；
宽度：100%；
}
#包装纸{
最小高度：100%；
高度：自动；
身高：100%；
保证金：0自动-100px；
背景色：红色；
边框：1px纯黑；
}
#标题{
背景#438a48；
高度：100px；
}
#左列{
背景：#2675a8；
浮动：左；
宽度：25%；
高度：自动；
身高：100%；
}
#地图画布{
背景：#000；
浮动：对；
宽度：75%；
身高：100%；
}
#页脚，#推{
背景：#df781c；
高度：100px；
}

但参数高度：100%；在map#canvas和#leftcolumn处，内容会超出屏幕大小，但如果未指定高度，则无法看到地图

有人知道如何修改/创建布局，以便用谷歌地图自动填充内容区域吗

谢谢

你的问题是你有一个100px的标题，你不能从你给地图画布的100%高度中减去它。因此，构造的总高度当然是主体高度的100%，加上它溢出到底部的100个像素

我通常是这样解决的。我讨厌使用

position:absolute

，除非真的有必要，但我找不到更好的方法：

#map_canvas {
background: #000;
position: absolute;
left: 25%;
right: 0px;
bottom: 0px;
top: 0px;
}