使用定义的最小高度创建可扩展的CSS网格

Question

在那里的所有CSS问题中，高度参数 - 这应该相当容易 - 总是让我烦恼。

我正在为ExpressionEngine驱动的客户端网站开发一个日历组件。我正在使用SolSpace的Calendar插件（这在后端很棒，BTW），它附带的模板是基于表格的。

我想制作一个基于CSS的模板，但我仍然坚持如何管理单元格的高度。

以下是现在的样子：http://cornerstonearts.hostasaurus.com/calendar

最初，我设置了单元格，以便在事件数量超过可用空间时扩展单元格。我按照您的期望做到了：min-height:100%; overflow-y:hidden;

我还将相同的设置应用于包含DIV的每个星期行和月份容器。

问题是空的细胞完全塌陷，而溢出的细胞彼此独立地扩张。后者适当地推开了一周的行，但是那一行中的那些单元格不会扩展以填充它们。结果，边界完全没有了（见附件）。

因此我将最小高度更改为120px，但之后它们根本不会扩展。我也尝试了height:120px; min-height:100%; overflow-y:hidden;的组合，但这也没有用。

我如何制作细胞以便细胞扩张，并在需要时扩展它们在一周中的其他日子，但在它们为空时保持最小高度。

与往常一样，我非常感谢任何帮助。

谢谢，

TY

Answer 1

您说模板是基于表格的。你的意思是html表吗？如果是这样，我会将<td>上的屏幕截图上的边框放在div上。

css的问题在于个人<div>不知道彼此的高度是什么，除非它们彼此嵌套，这对于你想要实现的目标是不可行的解决方案。 / p>

实际上，如果它是一个事件日历，那么它就是表格数据，它是一个事件表。表本身没有任何问题。就像人们过去那样使用它们来布置整个网站。