Html 如何创建与具有可滚动体的容器高度相同的引导卡

正如标题所述，我正在尝试创建一个引导卡，该卡的高度将与其容器相同，我希望卡头在顶部，页脚在底部，然后我希望主体填充剩余的空间。我想身体是滚动的，以便它可以充满内容，但不会改变高度

仅供参考，这是一个聊天窗口

我在这里创作了一把小提琴： 确保在底部查看结果，因为列需要彼此相邻

HTML

<div class="container">
   <div class="row">
      <div class="col-md-8 red">
         Some Content here that sets determines the height
      </div>
      <div class="col-md-4">
         <div class="card h-100">
            <div class="card-header">Header (this card should be same height as red)</div>
            <div class="card-body scrollable">
               This area Should be scrollable and fill the remaining height of its parent container.<br><br>
            </div>
            <div class="card-footer">Footer (should be aligned with bottom of red)</div>
         </div>
      </div>
   </div>
</div>

---

一种方法是将第二列变成一个flex容器，其中包含

flex-direction:column

然后，该卡应具有

高度：0和
flex-grow:1

这样，它的高度将不取决于它的内容，而是取决于第一列的高度

请注意，如果左列的高度小于第二列页眉加页脚的高度，则此选项无效。


.row{
背景#f8f9fa；
边缘顶部：20px；
}
上校{
边框：实心1px#6c757d；
填充：10px；
}
红色
{
背景色：红色；
高度：350px；
}
.可滚动
{
溢出y：滚动；
}
.卡的全高{
身高：0；
柔性生长：1；
}

此处设置的某些内容决定了高度
页眉（此卡片的高度应与红色相同）
此区域应可滚动并填充其父容器的剩余高度。


Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
页脚（应与红色底部对齐）
一种方法是将第二列变成一个flex容器，其中包含
flex direction:column

然后，该卡应具有
高度：0和
flex-grow:1

这样，它的高度将不取决于它的内容，而是取决于第一列的高度

请注意，如果左列的高度小于第二列页眉加页脚的高度，则此选项无效。


.row{
背景#f8f9fa；
边缘顶部：20px；
}
上校{
边框：实心1px#6c757d；
填充：10px；
}
红色
{
背景色：红色；
高度：350px；
}
.可滚动
{
溢出y：滚动；
}
.卡的全高{
身高：0；
柔性生长：1；
}

此处设置的某些内容决定了高度
页眉（此卡片的高度应与红色相同）
此区域应可滚动并填充其父容器的剩余高度。


Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
页脚（应与红色底部对齐）
您可以用这样简单的jquery代码来实现这一点

$('.card').height($('.red').height()).removeClass('h-100');

您可以用这样简单的jquery代码来实现这一点

$('.card').height($('.red').height()).removeClass('h-100');

谢谢这很好，我想补充一点，它应该在窗口调整事件中出现，以便在窗口改变大小时保持正确的高度。谢谢这很好，我想补充一点，它应该在窗口调整事件中出现，以便在窗口改变大小时保持正确的高度。