javascript - 外部 DIV 与内部 DIV 一起向上包裹和扩展

Question

这里需要一点帮助。谢谢 ：）

我正在努力使外部 div 包裹内部 div 并与内部内容可编辑 div 一起向上扩展。

内部 div 应该从下到上扩展，外部 div 应该包裹它（绿色应该包裹红色）并随之展开。

注意：在红色 div 中按 SHIFT+ENTER 使其向上扩展。

我在下面的codepen中有一个例子

<div style="background-color:green;">
  Test Test
  <div id="example" contenteditable style="background-color:red; position: absolute; bottom: 0px">
    Test Test
  </div>
</div>

标签： javascripthtmlcss

Answer 1

它们都必须是绝对的，并且包装高度必须是 100%。

<div style="background-color:green;  height: 100%; position: absolute;">
wrapper                                 
  <div id="example" style="border: 1px solid red; position: absolute; bottom: 0;">
    inner
  </div>
</div>