Html CSS3-防止弹出体因其内容而增长

我正在编写一个与下图相同的弹出窗口：

这是我的css代码示例

html，
身体{
身高：100%；
}
#模态{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
背景色：rgba（0,0,0,0.8）；
}
.模态盒{
身高：100%；
宽度：400px；
背景色：#FFF；
左边距：自动；
显示：表格；
表布局：固定；
}
.模态标题，
.模态体，
.模态页脚{
显示：表格行；
}
.模态体{
身高：100%；
}
.正文内容{
显示：表格单元格；
垂直对齐：中间对齐；
身高：100%；
溢出：自动；
}

测试模态
标题
这是正文内容
页脚

您尝试过使用“最大高度”吗？@Roy我应该使用哪个元素来设置“最大高度”？并设置最大高度：100%<代码>#模态{位置：绝对；顶部：0；底部：0；左侧：0；右侧：0；背景色：rgba（0,0,0,0.8）；高度：500px；}。模态体{高度：300px；溢出-y:auto；}试试这个。如果这是您所需要的。您正在使用许多与表相关的css属性和样式，但在这里您没有使用

。这有什么原因吗？使用这样的风格在过去是一种有用的技巧，但据我所知，现在不再需要了。这些可能会带来意想不到的行为；至少，它们可能会让将来处理您的代码的开发人员感到困惑。（也许有一个合法的理由仍然使用这样的值；可能是-我不知道有一个。）@avocadatoria我在许多项目中使用表css，我认为它仍然有用。有一件事我很确定，它可以很好地实现跨浏览器兼容性