html - 绝对 child 尊重 parent 基于百分比的填充，同时将其固定到底部

Question

我有一个相对定位的父元素。该元素包含一个仅部分可见的子元素。当父级悬停时，子级应该增长，最大为父级的 90%。

父级有一个静态高度和一个百分比填充。因为 child 需要从下往上生长，所以定位是absolute，bottom 0。

因为 child 现在是绝对定位的，所以它不考虑填充。我试图通过向这个 child 添加 left: 3% 和 right: 3% 来解决它。但我认为由于绝对定位，这些百分比不是针对它的父元素计算的。

问题:

期望的结果:

如何在尊重父元素填充的情况下将此子元素从下往上增加到最大 260px？

(我尝试过使用 margin-top 方法，但这会产生不良影响，即文本总是增长到允许的最大大小，即使文本不需要这么大的空间也是如此。)

---

* {
  box-sizing: border-box;
}
.padding {
  padding: 3%;
  position: relative;
  background-color: black;
  height: 286px;
  color: white;
  border: 1px white solid;
  float: left;
}
.absolute {
  position: absolute;
  padding: 1.5%;
  background-color: white;
  color: black;
  left: 3%;
  right: 3%;
  bottom: 0;
  max-height: 78px;
  overflow: hidden;
  transition-duration: .6s;
}
.padding:hover .absolute {
  max-height: 260px;
}

<div class="padding" style="width: 70%">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  <div class="absolute">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
    Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</div>
</div>
<div class="padding" style="width: 30%">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  <div class="absolute">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
    Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</div>
</div>
<div class="padding" style="width: 100%">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  <div class="absolute">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
    eu, pretium quis, sem.</div>
</div>

Answer 1

尝试添加一个包含 .absolute 的包含 div 作为子元素。包含的 div 将尊重 .padding 的填充。

在这个例子中:https://jsfiddle.net/42u1hac0/

.inner{
    overflow: hidden;
    position:relative;
    height: 100%;
}

overflow: hidden; 以便 .absolute 在其悬停状态下尊重 .padding 的填充。