Textarea 未填满父项 div 的高度

Question

我正在尝试制作两列（一列包含照片和选择，另一列包含文本区域）。我需要我的文本区域与带有照片、按钮和选择的列的高度相同。

我把右边 DIV 涂成黑色，在 "flex" 的帮助下它和左边的一样大。但是将 height=100% !improtant; 设置为 textarea 并没有帮助。

此外，设置 height=500px !important 效果很好，将其设置为 500px，因此大小确实发生了变化。但是 100% 没有给我正确的结果。

.modalimg {
  width:100%;
  max-height:100px;
  margin-bottom:5px;
}

.modalimg + button {
  margin-bottom:5px;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

<div class="form-group row-eq-height">
  <div class="col-sm-2 col-sm-offset-1">
    <img src="https://pp.vk.me/c637522/v637522431/7314/Of3UbOiEb8o.jpg" class="modalimg col-sm-12 img-rounded">
    <button class="btn col-sm-12 btn-primary">Upload</button>
    <select class="form-control">
      <option>One</option>
      <!--set of options-->
    </select>
  </div>
  <div class="col-sm-9 " style="background: #000000;">
    <textarea type="text" placeholder="Body" class="form-control body-field row-eq-height"></textarea>
  </div>
</div>

Answer 1

using jquery we can get the height as you required

$( document ).ready(function() {
    var rightBoxHeight = $('.right-box-height').height();
  $('.left-box-height').css('height',rightBoxHeight);  
});

.modalimg {
  width:100%;
  max-height:100px;
  margin-bottom:5px;
}

.modalimg + button {
  margin-bottom:5px;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row-eq-height">
  <div class="col-sm-2 col-sm-offset-1 right-box-height">
    <img src="https://pp.vk.me/c637522/v637522431/7314/Of3UbOiEb8o.jpg" class="modalimg col-sm-12 img-rounded">
    <button class="btn col-sm-12 btn-primary">Upload</button>
    <select class="form-control">
      <option>One</option>
      <!--set of options-->
    </select>
  </div>
  <div class="col-sm-9 " style="background: #000000;">
    <textarea type="text" placeholder="Body" class="form-control body-field row-eq-height left-box-height"></textarea>
  </div>
</div>

Answer 2

您将 'display:flex;' 应用于错误的元素。只需将 flex 添加到 textarea 容器，即

.col-sm-9, .row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Textarea 未填满父项 div 的高度

Textarea doesn't fill parent div's height

html

css

textarea

flexbox