产生垂直溢出时忽略填充？

Padding ignored when producing vertical overflow?

JSFiddle 进行演示。

调整 window 的大小以在 table 无法再收缩时强制滚动条 - 出现了几个问题；

  1. Window 切入 <main> 的底部填充而不显示滚动条。
  2. 切入table内容时首先出现滚动条（紫色）。
  3. <body>（黄色）在滚动时变短 - 显示 <html>（绿色）。

期望的效果是 table 尽可能大（高度方面）。

在 <body> 中设置 min-width:100% 似乎使其在滚动时不会变短 - 尽管我似乎无法将其子项设置为跨越整个高度。

将 body 设置为 min-height: 100vh; 而不是 height: 100%;。即使正文的内容多于它可以显示的内容，您也会强制使用固定高度。

JSFiddle showing the fix.

编辑：如果您希望 main 占据 100% 的视口，则需要将 main 设置为 min-height: 100vh;

Edit2：要使 table 元素填充 main 元素，我能看到的唯一方法是使用 "magic number"，它假定您在 main 对象不会改变。

table {
    min-height: calc(100vh - 32px);  /* magic number, double the padding of `main` */
}