Question

这里需要一些帮助。谢谢:)）

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

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

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

我在下面的代码中有一个例子

＆＃13;

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

＆＃13;

Answer 1

您可以使用flexbox：

.outer {
  background: green;
  display: flex;
  flex-direction: column;
  /* Some minimal width */
  min-height: 50vh;
}

.inner {
  background: red;
  margin-top: auto;
}

<div class="outer">
  Test Test
  <div id="example" class="inner" contenteditable>
    Test Test
  </div>
</div>

Answer 2

它们都必须是绝对的，封套高度必须是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>

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

2 个答案: