如何去除Quarto网站中Leaflet地图上下的空白区域

要让Leaflet地图填满页眉与页脚之间的空间，需要从页面边距、代码块容器间距、地图高度设置三个方面调整，具体步骤如下：

1. 修改自定义CSS样式（styles.css） #

在项目的styles.css文件中添加以下样式，移除默认的页面边距和代码块间距：

/* 移除页面内容的默认内边距和外边距 */
.quarto-page-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* 移除地图代码块输出容器的额外间距 */
.cell-output-display {
  margin: 0 !important;
  padding: 0 !important;
}

/* 设置地图高度：视口高度减去页眉+页脚的总高度（可根据实际高度微调） */
.leaflet {
  height: calc(100vh - 96px) !important;
}

注：96px是假设页眉高度约56px、页脚高度约40px的总和，你可以通过浏览器开发者工具查看实际的页眉/页脚高度后调整这个数值。

2. 调整Leaflet地图代码块配置 #

修改index.qmd中的地图代码块，确保地图容器能继承设置的高度：

```{r}
#| label: setup
#| include: false

library(tidyverse)
library(leaflet)

#| label: map
#| echo: false
#| warning: false

leaflet() %>%
  addProviderTiles("CartoDB", group = "CartoDB")

如果需要更直接地在代码块中指定高度，也可以给代码块添加`height`选项：
```r
```{r}
#| label: map
#| echo: false
#| warning: false
#| height: calc(100vh - 96px)

leaflet() %>%
  addProviderTiles("CartoDB", group = "CartoDB")

## 3. 可选：关闭侧边目录（TOC）
如果你的页面不需要侧边目录，在`_quarto.yaml`中将`toc: true`改为`toc: false`，避免目录占用空间影响地图填充：
```yaml
format:
  html:
    theme: cosmo
    css: styles.css
    toc: false # 关闭侧边目录

完成以上调整后，重新渲染网站，地图即可填满页眉与页脚之间的全部空间。

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