Boostrap 4:使文本区域与列高度匹配

Question

我试图让bootstrap列中的一个文本区域用CCS (无JS)填充列的剩余高度。

​

.form-row {
  background: yellow;
  padding: 20px;
}

.col-9 {
  background: lightgreen;
}

.col-3 {
  background: violet;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
  <div class="col-9">
    <div class="form-group">
      <label>Your Text</label>
      <textarea class="form-control">This textarea should fill the remaining height / green box</textarea>
    </div>
  </div>
  <div class="col-3">
    some random stuff<br> some random stuff<br> some random stuff<br> some random stuff<br> some random stuff<br> some random stuff<br>
  </div>
</div>

​

左侧的文本区域应该与右侧的高度匹配(填充父级的剩余高度)。

然而，我不能完全确定如何以一种简单的方式实现这一点-而不是修改每个列/表单组。使文本区height: 100%不是一个解决方案，因为它会溢出父级。

Fiddle for reference

更新:它还应该将表单组的margin-bottom保留在列中。最终结果应该类似于this Fiddle

​

.form-row {
  background: yellow;
  padding: 20px;
}

.col-9 {
  background: lightgreen;
}

.col-3 {
  background: violet;
}

textarea.form-control {
  height: 96px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
  <div class="col-9">
    <div class="form-group">
      <label>Your Text</label>
      <textarea class="form-control">This textarea should fill the remaining height / green box</textarea>
    </div>
  </div>
  <div class="col-3">
    some random stuff<br> some random stuff<br> some random stuff<br> some random stuff<br> some random stuff<br> some random stuff<br>
  </div>
</div>

​

Answer 1

试试这个: HTML

<div class="form-row">
  <div class="col-9">
    <div class="form-group form-div">
      <label>Your Text</label>
      <textarea class="form-control">This textarea should fill the remaining height / green box</textarea>
    </div>
  </div>
  <div class="col-3">
    some random stuff<br>
    some random stuff<br>
    some random stuff<br>
    some random stuff<br>
    some random stuff<br>
    some random stuff<br>
  </div>
</div>

CSS：

.form-row {
  background: yellow;
  padding: 20px;
}

.col-9 {
  background: lightgreen;
}

.col-3 {
  background: violet;
}

.form-div {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 1rem;
  margin-bottom: 0px;
}

textarea.form-control {
  height: 100%;
}

您可以阅读有关flex属性here的内容