实现CSS等于列/卡片的高度:卡片内容的响应高度

时间:2018-11-30 09:39:26

标签: javascript css angular typescript

我将Angular和Materialize CSS用于其响应式网格系统,尽管效果很好,但我连续遇到高度不相等的卡片。

我相信行将与Materialize网格系统始终保持相同的高度,但是卡的高度将根据内容进行调整。

我连续有两张卡,每张卡都有自己的单独列,我希望它们的高度保持不变。行的高度将由最大的卡片定义(我认为)。

我可以将两张卡的高度都设置为100%(我认为),以便较短的卡可以增加高度以匹配较高的卡,但是存在一个问题:

较短的卡片分为三个部分:照片,带有文字的卡片内容部分以及具有链接并由下划线分隔的卡片动作部分。通过CSS通过增加卡片的高度,我通过增加卡片动作部分的高度来增加卡片的高度,这看起来很糟糕。我希望卡片内容部分能够增长以匹配更高卡片的高度。

我想我可以通过javascript / typescript(我使用的是angular)来完成此任务,方法是将较短卡的卡内容部分的css高度增加两张卡的高度之差。

问题是,我不确定何时应该调用该函数进行更改。加载网页时需要进行调整,但是每当调整浏览器大小时都需要进行调整。

我尝试使用Angular onInit生命周期挂钩检查两个卡片元素的样式,但是我相信直到onInit挂钩之后才进行样式设置。

在实现Materialize后,如何立即调用一个函数来重新调整卡的高度?

我想得太多了吗?

0 个答案:

没有答案