MkDocs-Material隐藏导航栏与目录后如何保留页面边距？

问题描述 #

已通过页面Front Matter配置隐藏导航栏（navigation）和目录（toc）：

---
hide:   
  - navigation
  - toc
---

但隐藏后页面内容边距发生变化，希望保持与其他正常页面一致的边距。

解决方案 #

默认情况下，mkdocs-material会在隐藏导航栏和目录后自动拉伸内容区域以填充空白，导致边距改变。可以通过自定义CSS来固定内容区域的布局，匹配正常页面的边距。

方法1：全局适配所有隐藏导航和目录的页面 #

1. 在项目的docs目录下创建stylesheets文件夹（若不存在），新建custom.css文件。
2. 在mkdocs.yml中引入自定义CSS：

extra_css:
  - stylesheets/custom.css

3. 在custom.css中添加以下样式：

/* 保持同时隐藏导航和目录的页面边距与正常页面一致 */
body[data-md-state="hide-navigation"][data-md-state="hide-toc"] .md-content {
  max-width: calc(var(--md-content-width) + var(--md-sidebar-width) * 2);
  margin: 0 auto;
  padding-left: var(--md-sidebar-width);
  padding-right: var(--md-sidebar-width);
}

这段代码利用主题内置的CSS变量，让内容区域的总宽度等于「正常内容宽度 + 左右侧边栏宽度」，同时设置左右内边距等于侧边栏宽度，完全匹配正常页面的边距。

方法2：仅针对特定页面适配 #

如果只需要给部分页面保留边距，可以给目标页面添加自定义类：

1. 在目标页面的Front Matter中添加classes配置：

---
hide:   
  - navigation
  - toc
classes:
  - keep-margin
---

2. 在custom.css中添加对应样式：

/* 给标记了keep-margin类的页面保留原边距 */
.page.keep-margin .md-content {
  max-width: calc(var(--md-content-width) + var(--md-sidebar-width) * 2);
  margin: 0 auto;
  padding-left: var(--md-sidebar-width);
  padding-right: var(--md-sidebar-width);
}

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