html - 如何使用 bootstrap 4 使 textarea 元素填充所有高度？

Question

如何使用 bootstrap 4 使 textarea 元素填充页眉和页脚之间的所有高度而无需滚动条？这是我的 html 代码:

#container {
    background-color: rgb(253, 248, 177);
}

#title {
    color: white;
    padding-top: 7px; 
}

#cancel, #submit {
    color: white;
    font-size: 20px;
}

#add {
    font-size: 20px; 
}

#delete, #cancel, #submit {
    display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container min-vh-100 d-flex flex-column" id="container">

  <!-- header -->
  <div class="row align-items-start bg-info" id="header">
    <div class="col text-center">
      <button type="button" class="btn" id="cancel">&#10007;</button>
    </div>
    <div class="col text-center">
      <h4 id="title">Notebook</h4>
    </div>
    <div class="col text-center">
      <button type="button" class="btn" id="submit">&#10004;</button>
    </div>
  </div>

  <br />
  <!-- main -->
  <div class="row flex-grow-1">
    <div class="col" id="main">
      <textarea class="form-control textarea" placeholder="write note" id="note"></textarea>
    </div>
  </div>

  <!-- footer -->
  <div class="row align-items-end" id="footer">
    <div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
      <button id="add" class="btn btn-info rounded-circle">
        <h4 style="padding: 0px; margin: 0px;">&#x2b;</h4>
      </button>
      <button id="delete" class="btn btn-info rounded-circle">&#128465;</button>
    </div>
  </div>

</div>

谁能告诉我该怎么做，我希望它能够响应，所以我不想为 textarea 元素设置特定的行数。

Answer 1

只需将 h-100 添加到文本区域，因为它的父 div 已经有 flex-grow-1，所以它已经填充了所有剩余空间:

#container {
    background-color: rgb(253, 248, 177);
}

#title {
    color: white;
    padding-top: 7px; 
}

#cancel, #submit {
    color: white;
    font-size: 20px;
}

#add {
    font-size: 20px; 
}

#delete, #cancel, #submit {
    display: none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container min-vh-100 d-flex flex-column" id="container">

      <!-- header -->
      <div class="row align-items-start bg-info" id="header">
        <div class="col text-center">
            <button type="button" class="btn" id="cancel">&#10007;</button>
        </div>
        <div class="col text-center">
          <h4 id="title">Notebook</h4>
        </div>
        <div class="col text-center">
            <button type="button" class="btn" id="submit">&#10004;</button>
        </div>
      </div>

      <br />
      <!-- main -->
      <div class="row flex-grow-1">
        <div class="col" id="main">
            <textarea class="form-control textarea h-100"  placeholder="write note" id="note"></textarea>
        </div>
      </div>

      <!-- footer -->
      <div class="row align-items-end" id="footer">
        <div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
          <button id="add" class="btn btn-info rounded-circle"><h4 style="padding: 0px; margin: 0px;">&#x2b;</h4></button>
          <button id="delete" class="btn btn-info rounded-circle">&#128465;</button>
        </div>
      </div>

    </div>