绝对孩子尊重父母基于百分比的填充，同时将其固定在底部

Question

我有一个相对定位的父元素。此元素包含仅部分可见的子项。当父母徘徊时，孩子应该成长，最多为父母的90％。

父级具有静态高度和填充百分比。 因为孩子需要从下往上成长，所以它位于绝对的底部0。

因为孩子现在是绝对的，所以它不尊重填充。 我试图通过向此孩子添加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;以便{h}处于悬停状态的.absolute尊重.padding的填充。

Answer 2

添加div，其中包含.padding的所有内容，包括.absolute，然后将这些css添加到div -

position: relative;
width: 100%;
height: 100%;

现在，此div将遵循应用于padding的{​​{1}}，因此包含padding div也将如此。在这种情况下，您可以移除div.absolute的{​​{1}}，以便padding-bottom完全位于div.padding。 这是小提琴 - http://jsfiddle.net/zm9qoaec/1/