ヘッダー、フッター付き全画面Google Map #CSS

ベタですが...
ヘッダーとフッター領域を確保しながらその他はGoogle Mapで埋めるHTMLとCSSです。
ネットに転がってるサンプルを見ると時々Googleのコピーライト部が隠れちゃってるのがありますね、一応コピーライト部も隠れないように書いてます。

短い時

長い時

ソースコード類

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&language=ja&region=JP"></script>
    <script src="./script.js" type="text/javascript"></script>
    <link rel="stylesheet" href="style.css" />
    <title>gmap</title>
</head>

<body>
    <header>
        <p>ヘッダー</p>
        <p>ヘッダー</p>
        <p>ヘッダー</p>
    </header>
    <div class="map_frame">
        <div id="map-canvas"></div>
    </div>
    <footer>
        <p>フッター</p>
        <p>フッター</p>
        <p>フッター</p>
    </footer>
</body>

</html>

style.css

* {
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    -o-box-sizing      : border-box;
    -ms-box-sizing     : border-box;
    box-sizing         : border-box;
}
html, body {
    width         : 100%;
    height        : 100%;
    margin        : 0;
    padding       : 0;
}
p {
    margin        : 0;
    padding       : 0;
    line-height   : 120%;
}
header {
    width         : 100%;
    height        : 200px;
    position      : absolute;
    background    : #eeeeee;
    top           : 0;
    border-bottom : 1px solid #999999;
    padding       : 5px;
    overflow      : hidden;
}
.map_frame {
    position      : absolute;
    top           : 0;
    bottom        : 0;
    width         : 100%;
    margin-top    : 200px;/* ヘッダーの高さ */
    margin-bottom : 100px;/* フッターの高さ */
}
#map-canvas {
    width         : 100%;
    height        : 100%;
}
footer {
    position      : absolute;
    width         : 100%;
    height        : 100px;
    bottom        : 0;
    background    : #eeeeee;
    border-top    : 1px solid #999999;
    padding       : 5px;
    overflow      : hidden;
}

script.js

var map;

google.maps.event.addDomListener(window, "load", function() {
    // init map
    var mapOptions = {
     "zoom"   : 14,
     "center" : new google.maps.LatLng(35.685379, 139.753089)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}, false);