Question

我有一个包含两行（col-md-6）的表单。在左侧有一些字段，在右侧，只有一个textarea。

现在我想做的是让textarea与所有其他字段的高度相同。我认为在向行设置display: flex;时很容易实现这一点，以便拖曳col-md-6的高度相同，然后将height: 100%添加到{{1}但不幸的是我错了。输入不会扩展到整个高度。

这是我的HTML代码：

input-group

我添加了内联样式以减少stackoverflow上的代码。

同样，我可以将两列放到相同的高度，但是我无法将textarea的高度设置为100％。

有人能告诉我这是如何运作的吗？如果可能，没有JavaScript！

Answer 1

＆＃13;

textarea {
  height: 100%;
 }

＆＃13;

<div class="row" style="display: flex;">

  <div class="col-md-6">
    <div class="input-group">
      <div class="input-group-addon">Input 1:</div>
      <input type="text" class="form-control">
    </div>
    <div class="input-group">
      <div class="input-group-addon">Input 2:</div>
      <input type="text" class="form-control">
    </div>
    <div class="input-group">
      <div class="input-group-addon">Input 3:</div>
      <input type="text" class="form-control">
    </div>
  </div>

  <div class="col-md-6">
    <div class="input-group" style="height: 100%;">
      <div class="input-group-addon">Textarea:</div>
      <textarea class="form-control"></textarea>
    </div>
  </div>

</div>

＆＃13;

使输入组的高度与col相同

1 个答案: