使传单地图全屏无滚动条

Question

这可能是一个简单的修复方法，但我一直没弄明白。如何让这张地图在没有滚动条的情况下全屏显示？

<!DOCTYPE html>
<html>

  <head>
    <script src='//cdn.jsdelivr.net/npm/tabletop@1.5.2/src/tabletop.min.js'></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />

    <script src="//unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

    <style>
    html, body{  
    height: 100%;
    width: 100%;
}


 #map-div {
   height: 100%;
   width: 100%;
}
      </style>    
      
  </head>

  <body>
      <div id="map-div"></div>
      
<script>
var map = L.map('map-div').setView([55.676098, 12.568337], 5);
var basemap = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png', {
  attribution: 'Basemap (c) <a href="http://openstreetmap.org">OpenStreetMap</a>',
  //minZoom: 5,
  maxZoom: 100
});
basemap.addTo(map);


var fg = L.featureGroup().addTo(map);
function addPoints(data, tabletop) {
    var line = L.polyline([]).addTo(map);
    for (var row in data) {
    var marker = L.marker([
      data[row].Latitude,
      data[row].Longitude
    ]).addTo(fg);
    line.addLatLng(marker.getLatLng());
    marker.bindPopup('<strong>' + data[row].Info + '</strong>');
  }
  
  map.fitBounds(fg.getBounds());
}


function init() {
  Tabletop.init({
    key: 'https://docs.google.com/spreadsheets/d/1Rs6xPlJ8pU4UFfmokjATaf4dArMWxQxZcyS-xRIIFuY/edit?usp=sharing',
    callback: addPoints,
    simpleSheet: true
  });
}
init()
</script>     
  </body>

</html>

地图现在是这样的：https://enounce.github.io/

我已将所有代码包含在 HTML 文件中，我不确定从外部源调用脚本和 css 是否更好？

提前致谢。

Answer 1

将此 CSS 添加到您的站点：

html, body{
   margin: 0;
   padding: 0;
}

Answer 2

我希望这能回答你的问题...

* {
  margin: 0;
  padding: 0; 
}

使传单地图全屏无滚动条

Make Leaflet map full screen without scroll bars

html

leaflet