当position-absolute div增大尺寸时，如何动态调整相对位置容器的填充底部？

问题描述

我有一个Joomla网站，其中有一个自定义替代新闻快讯类别布局。有一个外部div（position: relative），里面有三个div：标题，内容和“更多内容”。通过使用position: absolute; bottom: 0;将read more div放置在外部div的底部，并将40px的底部填充添加到内容div中，以使文本不会隐藏在read more div的后面。

文章显示在三列中，每行中三个文章的高度相同，即最长的高度。这在该行中较短的文章的内容下方留有一些空间，这就是为什么阅读的内容整齐地位于div底部的原因，如下所示：

但是...如果 之一：read more div中的文本占用两行或更多行 或：用户增加其浏览器的字体大小，这可能具有将文本移至第二行的效果。

内容div中的填充不够深，最后一行文本被隐藏在read div后面，如下所示：

（是的，我知道有错字！）

如果用户增加字体大小，则如下所示：

那么...我可以添加什么CSS来调整内容填充以适合read more div的大小？

谢谢

这是基本html和CSS的简单版本：

<style>.outer {
  border: 2px solid red;
  position: relative;
  background-color: red;
}

.header {
  color: white;
  font-size: 1.5rem;
  padding: 8px 16px;
}

.content {
  background-color: white;
  color: gray;
  font-size: 1rem;
  padding-bottom: 8px 16px 40px;
}

.readmore {
  position: absolute;
  background-color: red;
  bottom: 0;
  color: white;
  font-size: 1.5rem;
  padding: 0 2rem 0.25rem 1rem;
  text-align: right;
}

</style>

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）