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>

上面的代码片段显示了一个相当基本的布局，其中容器div的宽度和高度由外力控制。（在实际代码中，这是由浏览器窗口调整大小控制的，但为了演示目的，我在这里进行了基本的表单高度调整。）

我想要实现的目标如下：

两个内部div都填充其父级的100％宽度。
顶部（蓝色）div具有固定高度。
底部（绿色）div将默认使用父级中的剩余空格。
然而，在existing JS code稍微调整文本的字体大小以最适合此空间（宽度和高度）之后......
如果容器足够高并且文本足够短以至于下面有额外的空间，则绿色div应垂直缩小以适合其文本，然后蓝色和绿色div应该在容器div中垂直居中显示。 / LI>
如果容器大小或文本发生变化，请重复拟合文本和重新定位的过程。

我知道如何单独完成大部分工作，我只是不确定如何将它们放在一起，以及第5步是否可以使用CSS或是否需要JS。（我尝试通过绝对翻译-50％技巧添加CSS的垂直居中，这在高容器尺寸或宽度比它高的文本时效果很好，但不是相反 - 文本溢出绿色div因为高度不固定所以不能通过字体大小调整脚本来考虑。）

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

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

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满足提醒容器的高度，然后在计算文本大小和宽度后缩小到适合新的文字高度

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*/);
    }

您还需要为bodytext div添加一个ID：

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

自动调整div的大小

1 个答案: