Google map занимает всю высоту

Question

Это код, над которым я работаю, но я не могу понять, где я ошибся. Карта должна отображаться на полной высоте между верхним и нижним колонтитулом, но кажется, что она фактически распространяется под верхним и нижним колонтитулом. Это проблема, потому что она покрывает информацию об авторских правах googles и часть элементов управления.

http://jsfiddle.net/GFcBU/9/

Может кто-нибудь показать мне, где я пошло не так?

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

Answer 1

Пожалуйста, попробуйте следующее:

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: http://jsfiddle.net/G3Pxy/

Для контейнера, я добавил position: absolute, top: 45px и bottom: 0. Когда высота установлена ​​на авто, как она есть, она должна занимать оставшуюся высоту экрана. margin-bottom: 25px, что вы оставили место для нижнего колонтитула. Для нижнего колонтитула я только добавил width: 100%. По какой-то причине ширина нижнего колонтитула не охватывала ширину экрана, поэтому я должен был добавить это.