如何在VS Code中实现Google Maps全屏显示及Live Server标签页复用

问题1：地图设置height:100%无法显示，实现全屏/接近全屏地图 #

把#map的高度设为100%时地图不显示，核心原因是百分比高度需要依赖父元素的明确高度值，默认状态下html和body没有设置100%高度，导致#map的100%高度没有参照基准。

解决方法 #

修改CSS，给html、body设置全屏高度，同时清除页面默认的边距：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

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

• 如果不需要页面顶部的<h1>Google Maps</h1>，直接删除即可实现完全全屏；
• 如果要保留标题，可将#map的高度改为calc(100% - 标题高度)（比如标题高度为50px，就写height: calc(100% - 50px)）。

问题2：Live Server每次打开都新建Edge标签页，无法复用 #

解决方法 #

在VS Code中调整Live Server的设置：

1. 打开VS Code设置（快捷键Ctrl+,）
2. 搜索Live Server相关选项：
   • 找到Live Server: Browser，设置值为edge
   • 勾选Live Server: Chrome Debugging Attachment（该选项会让插件尝试复用已打开的浏览器标签页）
3. 同时检查Edge浏览器设置：打开Edge设置 → 外观 → 找到「打开链接的方式」，选择「在当前标签页中打开」

如果上述设置不生效，可直接修改settings.json：
打开settings.json（快捷键Ctrl+Shift+P输入Preferences: Open Settings (JSON)），添加以下配置：

{
  "liveServer.settings.browser": "edge",
  "liveServer.settings.ChromeDebuggingAttachment": true
}

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