Question

我有一个我无法弄清楚的例子，

我有一个容器（outer），其中包含三个子容器，我想要的是中间容器（div）的高度调整大小取决于可满足的大小。它们都应该“适合”外部div。

<div id="outer"> //container

  <div id="contenthead" contenteditable="true">head</div>       
  <div id="content"> I am content </div> <!-- I should shrink or grow depending on the content editable -->

  <div id="contentend" contenteditable="true">end</div>

</div>

我尝试使用mutationobserver，我尝试过使用jquery ui，但即使他们提供了解决方案，他们也只是“工作”，有时不会触发事件或丢失一两个像素。

任何人都知道如何做到这一点？

我做了一个例子：JSfiddle，它应该更好地解释我所追求的。

Answer 1

Flexbox可以做到这一点：

＆＃13;

#outer {
  width: 200px;
  height: 300px;
  border-style: dotted;
  border-color: black;
  border-width: 1px;
  display: flex;
  flex-direction: column;
}
#contenthead,
#contentend {
  background: pink;
}
#content {
  width: inherit;
  flex: 1;
  min-height: 200px;
  display: inline-block;
  border-style: solid;
  border-color: black;
  border-width: 1px;
}

＆＃13;

<div id="outer">

  <div id="contenthead" contenteditable="true">head</div>

  <div id="content">I am content</div>

  <div id="contentend" contenteditable="true">end</div>

</div>

＆＃13;

Answer 2

您必须在此使用display功能

.table {display:table;border-collapse:separate;border-spacing:5px;}
.table-row {display:table-row;}
.table-cell {display:table-cell;padding:5px;border:1px solid black;}

<div class="table">
 <div class="table-row">
  <div class="table-cell">123</div>
  <div class="table-cell">456<Br />sdf</div>
  <div class="table-cell">879</div>
 </div>
</div>

我相信这会对你有帮助。

根据可信度（s）高度改变兄弟姐妹的身高

2 个答案: