如何实现Leaflet地图全屏展示且页面无滚动条

核心问题修复 #

你当前出现滚动条的原因是浏览器默认给body元素添加了默认外边距，导致100%宽高的实际渲染尺寸超出了视口范围，修改你的CSS样式即可解决：

html, body{  
  height: 100%;
  width: 100%;
  /* 新增以下3行代码 */
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#map-div {
  height: 100%;
  width: 100%;
}

新增属性的作用：

• margin: 0、padding: 0：清除浏览器自带的默认内外边距，避免宽高计算时额外叠加边距导致超出视口
• overflow: hidden：直接隐藏超出视口范围的内容，从根源避免滚动条出现

关于资源引入方式的说明 #

如果是小型演示类项目，所有代码放在同一个HTML文件是完全可行的，维护更简单。如果是后续需要持续迭代、多人协作的大型项目，才建议把CSS、JS拆分为独立文件引入，更便于版本管理。你当前的使用场景下两种方案都没有问题。

内容的提问来源于stack exchange，提问作者Enounce