有没有办法像使用负边距一样使用translateY？

Question

这是我的例子：https://jsfiddle.net/a1xxj4j7/

HTML：

<div id="container">
  <div id="text">
  </div>
  <div id="float">
    asljsfjjddf
    fjsfd

    fd
    jff
  </div>
</div>

CSS：

#container{
  background: black;
}

#text{
  min-height: 300px;
  background: #fff;
  border: 1px solid black;
}

#float{
  background: red;
  transform: translatey(-50%);
  min-height: 100px;
  margin: 0 20%;
}

我希望#float div保持在容器#text的底部，其高度偏移50％。这是有效的，问题是因为#text div在翻译之前被渲染，它在底部留下了剩余的原始高度。我希望#text bottom等于#container div的底部，这样就可以“推”出偏移中的空格。 当然，如果我在#text上应用了一个负余量顶部，但是内容是动态的，那么我就无法设置一个固定的高度！ 在èureCSS中是否有技巧或者我需要使用JS吗？

由于