Html 谷歌地图占据了整个高度

这是我工作的代码，但我不明白哪里出了问题。地图应该显示在页眉和页脚之间的整个高度，但看起来它实际上延伸到页眉和页脚下面。这是一个问题，因为它掩盖了谷歌的版权信息和部分控制

谁能告诉我哪里出了问题

html, body, #container { height: 100%; }
body { z-index:1; position:relative; }
body > #wrapper { height:100%; margin:0 auto; width:100%; }
body > #wrapper > #header { z-index:3; position:relative; height:45px; background:#ccc; }
body > #wrapper > #container { z-index:2; position:relative; height:auto; min-height:100%; background:#eee; margin-top:-45px; padding-top:45px; padding-bottom:25px; box-sizing:border-box; margin-bottom:-25px; }
body > #wrapper > #footer { height:25px; background:#333; color:#fff; z-index:3; position:relative; }

.left {float: left;}
.right {float: right;}

---

请尝试以下操作：

body > #wrapper > #container { 
  z-index:2; 
  position:absolute; 
  top: 45px; 
  bottom: 0; 
  height:auto; 
  background:#eee; 
  box-sizing:border-box; 
  margin-bottom: 25px; 
  width: 100%;
}

body > #wrapper > #footer { 
  height:25px; 
  background:#333; 
  color:#fff; 
  z-index:3; 
  position:absolute; 
  bottom: 0; 
  width: 100% 
}

这是jFiddle：

---

对于容器，我添加了

position:absolute

，

top:45px

和

bottom:0

。当高度设置为“自动”时，它应具有屏幕的剩余高度。为页脚留出空间的

页边距底部：25px

。对于页脚，我只添加了

宽度：100%

。由于某些原因，页脚的宽度与屏幕的宽度不一致，因此我必须添加页脚宽度。

请尝试以下操作：

body > #wrapper > #container { 
  z-index:2; 
  position:absolute; 
  top: 45px; 
  bottom: 0; 
  height:auto; 
  background:#eee; 
  box-sizing:border-box; 
  margin-bottom: 25px; 
  width: 100%;
}

body > #wrapper > #footer { 
  height:25px; 
  background:#333; 
  color:#fff; 
  z-index:3; 
  position:absolute; 
  bottom: 0; 
  width: 100% 
}

这是jFiddle：

对于容器，我添加了

position:absolute

，

top:45px

和

bottom:0

。当高度设置为“自动”时，它应具有屏幕的剩余高度。为页脚留出空间的

页边距底部：25px

。对于页脚，我只添加了

宽度：100%

。由于某种原因，页脚的宽度没有跨越屏幕的宽度，所以我不得不添加它