使用 CSS 让 HTML dialog 模态框占据整个视口高度
我最近一直在试验 HTML 的 dialog element，例如在我的 Prompts.js JavaScript 库中。
今天，我让 Claude 为我构建一个实验，将其用于从屏幕右侧滑入的侧边栏，效果如下所示：
但是底部的那个间隙是怎么回事？我希望侧边栏占据整个屏幕的高度。
CSS 看起来没问题：
dialog {
position: fixed;
margin: 0;
padding: 0;
border: none;
width: 80%;
height: 100vh;
top: 0;
right: 0;
left: auto;
background-color: white;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
transform: translateX(100%);
transition: transform 0.1s cubic-bezier(0.2, 0, 0.38, 0.9);
}
那个间隙是从哪里来的？
Firefox DevTools 没有回答我的问题，所以我尝试询问 Claude，然后是 ChatGPT，等我与 Gemini 2.0 Flash 屏幕共享 并大声地争论 CSS 时，Natalie 听到了，她可怜我并主动提供帮助。
她怀疑这与 <dialog> 元素有关。我让 Claude 3.7 Sonnet 重写代码以使用 div 而不是 dialog，神秘的间隙消失了，这强烈暗示她是正确的。
我当时使用的是 Firefox。Natalie 指出 Chrome DevTools 会显示元素的默认浏览器样式，因此我们切换到了 Chrome，结果是...
Chrome 正在应用这些默认样式，包括 max-height 的样式：
dialog:-internal-dialog-in-top-layer {
position: fixed;
inset-block-start: 0px;
inset-block-end: 0px;
max-width: calc(100% - 2em - 6px);
max-height: calc(100% - 2em - 6px);
user-select: text;
visibility: visible;
overflow: auto;
}
神秘的间隙完全可以用 max-height: calc(100% - 2em - 6px); 规则来解释。
在我的 CSS 中添加 max-height: none（或 max-height: 100vh）修复了这个错误！
你可以在这里尝试。
深入 HTML 规范
我很好奇这是否是预期的行为，所以我挖掘了一下，并在 HTML 规范 中找到了它：
15.3.3 流内容
... dialog:modal { position: fixed; overflow: auto; inset-block: 0; max-width: calc(100% - 6px - 2em); max-height: calc(100% - 6px - 2em); }
该规范位于 GitHub 上，是一个 7MB 的源文件，太大而无法通过 GitHub 网络界面查看，所以我运行了以下命令：
```bash
cd /tmp
git clone git@github.com:whatwg/html
cd html
git blame source | rg 'max-height:' -C 30
它花了一段时间来运行：
Blaming lines: 53% (79074/148234)
显示了相关的 commit：
075834570 (Tim Nguyen 2023-06-06 21:45:41 -0700 136481) dialog:modal {
075834570 (Tim Nguyen 2023-06-06 21:45:41 -0700 136482) position: fixed;
075834570 (Tim Nguyen 2023-06-06 21:45:41 -0700 136483) overflow: auto;
075834570 (Tim Nguyen 2023-06-06 21:45:41 -0700 136484) inset-block: 0;
075834570 (Tim Nguyen 2023-06-06 21:45:41 -0700 136485) max-width: calc(100% - 6px - 2em);
075834570 (Tim Nguyen 2023-06-06 21:45:41 -0700 136486) max-height: calc(100% - 6px - 2em);
075834570 (Tim Nguyen 2023-06-06 21:45:41 -0700 136487) }
075834570 移动了该文本但没有引入它，所以我针对父树 运行了相同的命令：
git checkout af3ff8382c74f7dc9a98dcdd49a24d96bfc75f26
git blame source | rg '100% - 6px' -C 30
发现了这个：
979af1532 (Ian Kilpatrick 2020-11-03 10:26:48 -0800 124234) <ul>
979af1532 (Ian Kilpatrick 2020-11-03 10:26:48 -0800 124235) <li><span>'position'</span> property to 'fixed'</li>
979af1532 (Ian Kilpatrick 2020-11-03 10:26:48 -0800 124236) <li><span>'overflow'</span> property to 'auto'</li>
979af1532 (Ian Kilpatrick 2020-11-03 10:26:48 -0800 124237) <li><span>'inset-block-start'</span> property to '0'</li>
979af1532 (Ian Kilpatrick 2020-11-03 10:26:48 -0800 124238) <li><span>'inset-block-end'</span> property to '0'</li>
979af1532 (Ian Kilpatrick 2020-11-03 10:26:48 -0800 124239) <li><span>'max-width'</span> property to 'calc(100% - 6px - 2em)'</li>
979af1532 (Ian Kilpatrick 2020-11-03 10:26:48 -0800 124240) <li><span>'max-height'</span> property to 'calc(100% - 6px - 2em)'</li>
979af1532 (Ian Kilpatrick 2020-11-03 10:26:48 -0800 124241) </ul>
这是 979af1532，带有 commit 信息：
将模态
<dialog>的定位方式更改为 CSS 修复了 w3c/csswg-drafts#4645。修复了 #5178。
该 commit 于 2020 年 11 月提交，并且这些链接的 issue 线程包含有关此更改如何发生的各种详细信息。
我今天还发现 HTML Living Standard 确实是一个 living standard - whatwg/html 仓库有 12,318 个 commits，最近的一个提交不到 24 小时前。
更新：Firefox 可以显示浏览器样式
感谢 uallo 在 Hacker News 上，我了解到 Firefox 可以 在检查器中显示浏览器样式，但该选项默认情况下处于关闭状态：
我想默认情况下它是关闭的，因为它添加了很多信息：
而且由于 that，我在 Firefox 源代码存储库中找到了 html.css，其中列出了该浏览器中使用的所有默认样式。
创建于 2025-03-14T16:06:34-07:00，更新于 2025-03-16T08:50:25-07:00 · 历史记录 · 编辑