自动调整 div 大小

Question

这是另一个关于如何让 div 大小调整行为的无限问题，但相反，我无法找到一个足够相似的问题来让我的特定案例正常工作。

function update() {
  $('#container .body-text').bigText({verticalAlign:'top',whiteSpace:'pre'});
}

function doresize(form) {
  var container = $('#container')[0];
  container.style.height = form.height.value + 'px';
  setTimeout(500, update);
}

function dotext(form) {
  $('#container .body-text').text(form.text.value);
  update();
}

update();

.container {
  float: left;
  border: solid 1px black;
  position: relative;
  margin-left: 5px;
  width: 20%;
  height: 200px;
  padding: 2px;
}

.header {
  width: 100%;
  height: 64px;
  background-color: blue;
}

.body {
  width: 100%;
  height: 100%;
  max-height: calc(100% - 64px);
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://rawgithub.com/DanielHoffmann/jquery-bigtext/master/jquery-bigtext.js"></script>

<form name="setup">
  <label>Set height: <input type="number" name="height" value="200" /></label>
  <button type="button" onclick="doresize(this.form)">Resize</button><br />
  <label>Set text: <textarea name="text">Multi-Line
Text</textarea></label>
  <button type="button" onclick="dotext(this.form)">Change</button><br />
</form>
<br />

<div id="container" class="container" onload="update()">
  <div class="header"></div>
  <div class="body"><div class="body-text">Multi-Line
Text</div></div>
</div>

上面的 sn-p 显示了一个相当基本的布局，其中包含一个容器 div，其宽度和高度由外力控制。 （在实际代码中，这是通过调整浏览器窗口大小来控制的，但出于演示目的，我在此处进行了基本的表单高度调整。）

我想要达到的目的如下：

1. 两个内部 div 都填充到其父级的 100% 宽度。
2. 顶部（蓝色）div 具有固定高度。
3. 默认情况下，底部（绿色）div 将使用父级中的剩余空间。
4. 但是，经过 existing JS code 调整后文本的字体大小以最适合该空间（宽度和高度）...
5. 如果容器足够高且文本足够短以至于下方有额外空间，则绿色 div 应垂直收缩以适合其文本，然后蓝色和绿色 div 应在容器 div 中垂直居中显示。
6. 如果容器大小或文本发生变化，请重复拟合文本和居中的过程。

我知道如何单独完成大多数部分，我只是不确定如何将它们放在一起，以及第 5 步是否可以使用 CSS 或是否需要 JS。 （我尝试通过 absolute-translate-50% 技巧使用 CSS 添加垂直居中，该技巧适用于高容器尺寸或宽于高的文本，但反之则不行——文本溢出绿色 div，因为高度不固定，因此字体大小脚本无法考虑。）

如果需要，我可以重新排列或插入额外的 div。

---

编辑：受Shadi's answer启发的以下sn-p似乎可以解决问题：

function update() {
  var text = $('#container .body-text');
  text.parent().parent().css('height', '100%');
  text.parent().css('height', '100%');
  text.bigText({verticalAlign:'top',whiteSpace:'pre'});
  text.parent().css('height', text.height());
  text.parent().parent().css('height', text.height() + 64);
}

function doresize(form) {
  $('#container').css('height', form.height.value);
  update();
}

function dotext(form) {
  $('#container .body-text').text(form.text.value);
  update();
}

update();

.container {
  float: left;
  border: solid 1px black;
  margin-left: 5px;
  width: 20%;
  height: 200px;
  padding: 2px;
}

.subcontainer {
  position: relative;
  width: 100%;
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.header {
  width: 100%;
  height: 64px;
  background-color: blue;
}

.body {
  width: 100%;
  height: 100%;
  max-height: calc(100% - 64px);
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://rawgithub.com/DanielHoffmann/jquery-bigtext/master/jquery-bigtext.js"></script>

<form name="setup">
  <label>Set height: <input type="number" name="height" value="200" /></label>
  <button type="button" onclick="doresize(this.form)">Resize</button><br />
  <label>Set text: <textarea name="text">Multi-Line
Text</textarea></label>
  <button type="button" onclick="dotext(this.form)">Change</button><br />
</form>
<br />

<div id="container" class="container">
  <div class="subcontainer">
    <div class="header"></div>
    <div class="body"><div class="body-text">Multi-Line
Text</div></div>
  </div>
</div>

尝试使用 80 到 300 之间的值来查看它的实际效果。

Answer 1

我已经在代码中尝试过，请您尝试一下，看看它是否适合您的需要，下面的代码将使绿色div充满remining容器的高度，然后在计算文本大小和宽度后缩小到适合新的文字高度

function update() {
        $('#container').css('height', '200px' /*this would be dynamic based on the container height*/);
        $('#container .body-text').bigText({ verticalAlign: 'top', whiteSpace: 'pre' });
        $('#container').css('height', $('#bodytxt').height() + 64 /*this is the header height - blue div*/);
    }

您还需要为您的正文 div 添加一个 id：

<div id="bodytxt" class="body-text">Multi-Line Text</div>