Html 如何使div占用剩余的垂直空间

我的布局如下：

<div style="height:100px;border: 1px solid #F44;">
  <div style="background-color: #ccc; padding: 4px;">Title</div>  
  <div style="background-color: #a0a; padding: 4px;">Content</div>  
</div>

标题
内容

第二个

div

包含内容，粘贴在Title div的底部。现在我希望能够使Content div占据剩余的75px高度。问题是 顶部div的高度不是固定的。下面是这个问题的演示-

试试这个

<div style="height:100px;border: 1px solid #F44; overflow: hidden">
    <div style="background-color: #ccc; padding: 4px;">Title</div>
    <div style="background-color: #a0a; padding: 4px; height: 100%;">Content</div>
</div>

标题
内容

您可以将背景颜色移动到容器上，并稍微重新排列，使其看起来像是占据了整个区域

<div style="height:100px;border: 1px solid #F44;background-color: #a0a;">
  <div style="background-color: #ccc; border:4px solid #ccc;">Title</div>  
  <p style='margin:0;padding:3px'>Content</p>  
</div>

标题
内容

从包装器div中删除高度。这样，高度将是动态的。

您可以执行许多不同的操作

您最好的选择是：

• 将包装器设置为display:table，并将标题和内容div设置为display:table行

---

但如果你想更具创造性，你可以选择以下任何一种方式：

• 从外部容器中移除100像素的高度，使其仅与内容物一样高

• 如果要指定外部容器的高度，还可以指定内部元素的高度（例如：Title 25px，Content 75px；或Title:25%，Content 75%）

• 如果您的外部容器应该表示页面的完整高度，您可以将内容高度设置为100vh，即视口高度的100%

• 如果您希望非常明确，可以使用javascript设置内容div的高度：

  var contentH = ($('.wrapper').height() - $('.title').height());        
  $('.content').css('height',contentH);
  

---

是的，它正在切断底部。不，这不起作用。我知道它似乎起作用，但它没有完全按照上面发布的问题所预期的那样起作用。