Question

我想创建一个网页，页眉，页脚，左栏（25％宽栏，其中包含一些按钮等）和主要内容区域，必须填写谷歌地图。

我尝试通过以下方式修改this answer中的内容：

<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;
}

但参数高度：100％;在map_canvas和#leftcolumn导致内容超出屏幕大小，但如果未指定高度，则无法看到地图。

是否有人如何修改/创建布局以便使用Google地图自动填充内容区域？

谢谢！

Answer 1

你的问题是你有一个100px的标题，你不能从你给map_canvas的100％高度中减去它。因此，构造的总高度当然是身高的100％，加上溢出到底部的100个像素。

我通常以这种方式解决它。我讨厌使用position: absolute除非确实有必要，但我看不到更好的方法：

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

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

1 个答案: