Html 理解表格单元格为什么不'；t包装其100%高度内容

原始问题（已编辑）

CSS：为什么高度为100%的表格单元格同级超过表格行体

我正在测试CSS表。在我的一个测试中，我试图得到一个等高的列布局

• 我想要一个“旁白”在左边，应该填补100%的页面高度（例如列）
• A在“旁白”的右侧，我希望在“主要”内容上方有一个“标题”
• 我想“标题”和“主要”填补100%的页面高度
• 我希望整个版面的高度随着内容的增长而增长

下面是我的测试示例：

我将“aside”设置为表格单元格，并将“main”高度设置为100%。这导致“主体”的高度正好达到其母体高度的100%，并溢出“主体”的底部

您能解释一下为什么100%高度的“main”会溢出“body”表行吗？

我没料到会溢出来。我认为“main”将填充“header”下面的剩余空间，或者是表格中的任意一个，以增加并包裹整个高度

html，
身体{
保证金：0；
身高：100%；
}
html{
显示：表格；
}
身体{
背景色：#0000ff；
显示：表格行；
}
旁白{
背景色：#00ff00；
显示：表格单元格；
}
标题{
背景色：#909090；
}
主要{
背景色：#ffffff；
身高：100%；
}

在一边
标题
和一些内容
主要

已添加

body {
 overflow: hidden;
}

html，
身体{
保证金：0；
身高：100%；
}
html{
显示：表格；
}
身体{
背景色：#0000ff；
显示：表格行；
溢出：隐藏；
}
旁白{
背景色：#00ff00；
显示：表格单元格；
}
标题{
背景色：#909090；
}
主要{
背景色：#ffffff；
身高：100%；
}

在一边
标题
和一些内容
主要

main是其容器的100%，即主体，然后将其放置在收割台下，使其为收割台高度+主体容器高度=mainheight@KJEK-代码我同意你的解释，但我不明白为什么它会溢出body表行。如果单元格增长，主体行不应该增长吗？好的，我知道您希望它覆盖整个窗口而不显示任何滚动，并且希望父容器随着内容的变化而变化，但我无法理解的是，为什么您希望它像表一样运行。你为什么不先用桌子呢？你的最终结果是什么？您已经了解了溢出滚动显示背后的数学原理，您还想了解什么？@KJEK Code我正在测试CSS表（不是HTML表），所以我希望它的行为类似于表，但事实并非如此，因为主高度溢出，所以这是我想了解的问题。我想你可以把任何东西放在一个表中（html有显示表，body有表行），然后它会增长，这样它的内容就不会溢出。设置一些东西来显示表、行或单元格不会应用任何魔法属性，当给定高度时，它不会溢出容器。我认为需要解释的是父母与孩子在身高方面的关系。如果你有两个对象（比如div），一个叫做content div，另一个是full div，一个是没有高度的内容，另一个是100%的高度。内容将等于其子项（内容）的大小虽然full将等于其父屏幕的大小，但将它们放在彼此的顶部，您将获得内容+full父屏幕高度。我们仍然存在与您评论的相同问题：100vh是屏幕的大小，然后我们添加标题的高度，我们具有相同的高度overflow@KJEK-代码谢谢，但我只是想找一个解释而不是一个解决方案正如他所说，使用100vh也不是一个解决方案，因为身体高度将类似于页眉高度+100vh，所以你会得到溢出+滚动条。另外，我希望整个初始布局完全适合页面的100%，就像没有滚动条的完整页面表格一样。@cedlog-我认为这提供了一个线索。当表格行高度取决于表格单元格高度（增长以适应）且表格单元格高度取决于表格行高度（100%+页眉高度）时，存在无法令人满意地解决的循环相关性。因此，表格单元格内容会溢出表格单元格、表格行和表格。使用（100vh+页眉高度）时，没有循环依赖关系，表行可以增长以满足约束。@Alohci您能解释一下，在我的第二个示例中，我添加了一个css表div来包装{header，main}，并将main设置为表行，这种循环依赖关系是如何发生的吗？@cedlog-不，我不能完全解释您的第二个示例。作为表结构的一部分，表行上的100%可能会受到不同的处理。而不是像第一个示例中那样的表单元格的内容，但是我不知道在那里使用的确切算法。一般来说，一旦你进入边缘案例，CSS表格就是一门黑色艺术。CSS表格规范已经很久没有更新了，只是从来没有得到它真正需要的严格处理。