Google fullscreen map has vertical scrollbar
<p>i'm trying to build a fullscreen Google Map with the Javascript API and i kind of succeeded, the only thing left which i want to go away is a vertical scrollbar.</p>

<p>Here is my code from the index.php:</p>

<pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
    &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt;
    &lt;title&gt;LiebensMittel...weil das Herz mitisst!&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
    &lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAwsmcd75BCfaB9-VmeO5Q4mGK1aJ7f6Lk" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
    //&lt;![CDATA[

    var customIcons = {
      bakery: {
        name: 'Backwaren',
        icon: 'http://localhost/img/customMapIcons/bakery.png'
      },
      meat: {
        name: 'Fleisch',
        icon: 'http://localhost/img/customMapIcons/meat.png'
      },
      fish: {
        name: 'Fisch / Meeresfrüchte',
        icon: 'http://localhost/img/customMapIcons/fish.png'
      },
      fruit: {
        name: 'Obst / Früchte',
        icon: 'http://localhost/img/customMapIcons/fruit.png'
      },
      other: {
        name: 'Sonstiges',
        icon: 'http://localhost/img/customMapIcons/other.png'
      }
    };

    var mapStyles =[
    {
        featureType: "poi",
        elementType: "labels",
        stylers: [
              { visibility: "off" }
            ]
        }
    ];

    var mapOptions = {
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        styles: mapStyles
    };

    function load() {
        var map = new google.maps.Map(document.getElementById('map'),{
        center: new google.maps.LatLng(53.5508, 9.9928),
        zoom: 13,
        mapTypeControl: false,
        streetViewControl: false
      });
        var infoWindow = new google.maps.InfoWindow;
            downloadUrl("genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i &lt; markers.length; i++) {
          var storename = markers[i].getAttribute("storename");
          var addressline_1 = markers[i].getAttribute("addressline_1");
          var addressline_2 = markers[i].getAttribute("addressline_2");
          var storetype = markers[i].getAttribute("storetype");
          var phonenumber = markers[i].getAttribute("phonenumber");
          var mailaddress = markers[i].getAttribute("mailaddress");
          var webpage = markers[i].getAttribute("webpage");
          var from_mon = markers[i].getAttribute("from_mon");
          var to_mon = markers[i].getAttribute("to_mon");
          var from_tue = markers[i].getAttribute("from_tue");
          var to_tue = markers[i].getAttribute("to_tue");
          var from_wed = markers[i].getAttribute("from_wed");
          var to_wed = markers[i].getAttribute("to_wed");
          var from_thu = markers[i].getAttribute("from_thu");
          var to_thu = markers[i].getAttribute("to_thu");
          var from_fri = markers[i].getAttribute("from_fri");
          var to_fri = markers[i].getAttribute("to_fri");
          var from_sat = markers[i].getAttribute("from_sat");
          var to_sat = markers[i].getAttribute("to_sat");
          var from_sun = markers[i].getAttribute("from_sun");
          var to_sun = markers[i].getAttribute("to_sun");

          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = '&lt;table  style="width: 100%;"  border="0"&gt;'+
      '&lt;tbody&gt;'+
        '&lt;tr&gt;'+
          '&lt;td  style="text-align: left; vertical-align: top;"&gt;'+
            '&lt;h1&gt;' + storename + '&lt;/h1&gt;'+
            '&lt;p&gt;' + addressline_1 + '&lt;/p&gt;'+
            '&lt;p&gt;' + addressline_2 + '&lt;/p&gt;&lt;br&gt;'+
            '&lt;p&gt;' + phonenumber + '&lt;/p&gt;&lt;br&gt;'+
            '&lt;a  href="mailto:' + mailaddress + '"&gt;Email schreiben&lt;/a&gt;&lt;br&gt;'+
            '&lt;a  target="_blank"  href="' + webpage + '"&gt;Webseite&lt;/a&gt;&lt;/td&gt;'+
          '&lt;td  style="text-align: left; vertical-align: top;"&gt;&lt;img  alt="Liebensmittel.de" src="http://localhost/img/infoWindowIcons/lm_logo_small.png"&gt;'+
          '&lt;br&gt;&lt;b&gt;Öffnungszeiten&lt;/b&gt;&lt;br&gt;'+
            '&lt;table  style="width: 100%"  border="0"&gt;'+
              '&lt;tbody&gt;'+
                '&lt;tr&gt;'+
                  '&lt;td&gt;Montag&lt;/td&gt;'+
                  '&lt;td&gt;' + from_mon + ' - ' + to_mon + '&lt;/td&gt;'+
                '&lt;/tr&gt;'+
                '&lt;tr&gt;'+
                  '&lt;td&gt;Dienstag&lt;/td&gt;'+
                  '&lt;td&gt;' + from_tue + ' - ' + to_tue + '&lt;/td&gt;'+
                '&lt;/tr&gt;'+
                '&lt;tr&gt;'+
                  '&lt;td&gt;Mittwoch&lt;/td&gt;'+
                  '&lt;td&gt;' + from_wed + ' - ' + to_wed + '&lt;/td&gt;'+
                '&lt;/tr&gt;'+
                '&lt;tr&gt;'+
                  '&lt;td&gt;Donnerstag&lt;/td&gt;'+
                  '&lt;td&gt;' + from_thu + ' - ' + to_thu + '&lt;/td&gt;'+
                '&lt;/tr&gt;'+
                '&lt;tr&gt;'+
                  '&lt;td&gt;Freitag&lt;/td&gt;'+
                  '&lt;td&gt;' + from_fri + ' - ' + to_fri + '&lt;/td&gt;'+
                '&lt;/tr&gt;'+
                '&lt;tr&gt;'+
                  '&lt;td&gt;Samstag&lt;/td&gt;'+
                  '&lt;td&gt;' + from_sat + ' - ' + to_sat + '&lt;/td&gt;'+
                '&lt;/tr&gt;'+
                '&lt;tr&gt;'+
                  '&lt;td&gt;Sonntag&lt;/td&gt;'+
                  '&lt;td&gt;' + from_sun + ' - ' + to_sun + '&lt;/td&gt;'+
                '&lt;/tr&gt;'+
              '&lt;/tbody&gt;'+
            '&lt;/table&gt;'+
            '&lt;br&gt;'+
          '&lt;/td&gt;'+
        '&lt;/tr&gt;'+
      '&lt;/tbody&gt;'+
    '&lt;/table&gt;';


          var icon = customIcons[storetype] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}
    //]]&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="load()"&gt;
    &lt;div id="map"&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>And here is the style.css:</p>

<pre><code>html, body {
    height: 100%;
}

#map{
width:100%;
height:100%;
position: absolute;
top: 0px;
left: 0px;
}
</code></pre>

<p>What i've noticed is, when i scroll down the scrollbar, theres a few pixel thick white area at the bottom.</p>

<p>My thought was, in my noob words, that my fullscreen map div pushes down another element, which is causing the scrollbar...but i know nearly nothing about CSS so it's only a guess.</p>

<p>Can anyone point me in the right direction where my mistake is?</p>

<p>Please ask for more details if i left something important and kindly be patient, i'm new to this forum and webdesign in generel :)</p>

<p>best regards
Rolf</p>