Question

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

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

我在这里创建了一个小提琴：https://jsfiddle.net/MikeG42/Ldo1njy3/ 确保您正在查看底部的结果，因为列需要彼此相邻。

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>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.red
{
  background-color: red;
  height: 350px;
}

.scrollable
{
  overflow-y:scroll;
}

Answer 1

一种方法是将您的第二列变成带有 flex-direction: column 的弹性容器。

那么，卡片应该有height: 0;和flex-grow: 1;。
这样，它的高度就不会取决于它的内容，而是取决于第一列的高度。

请注意，如果左列的高度小于第二列的页眉加页脚的高度，则此操作将不起作用。

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.red
{
  background-color: red;
  height: 350px;
}

.scrollable
{
  overflow-y:scroll;
}

.card-full-height {
  height: 0;
  flex-grow: 1;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>

<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 d-flex flex-column">
      <div class="card card-full-height">
        <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>

          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

        </div>
        <div class="card-footer">Footer (should be aligned with bottom of red)</div>
      </div>
    </div>
  </div>
</div>

Answer 2

你可以用像这样简单的 jquery 代码来做到这一点

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

https://jsfiddle.net/u5f9xe2y/

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

2 个答案: