Bootstrap 4 textarea 填充剩余的第二列高度

Question

所以基本上我有 2 列，一列有一些输入，一列只有一个文本区域。问题是我想要第二列中的文本区域填充第一列的剩余高度，但我无法正常工作。我尝试将 textarea 的高度设置为 100%。

这里有一个例子：

<section class="contact-us">
  <div class="container" style="background-color: #D6EEFD">
    <div class="p-3">
      <h1 class="primary-brand">
        Title
      </h1>
      <p class="primary-brand">
        Eam ex scaevola eloquentiam, ex possim torquatos per. Pro an mnesarchum assueverit. Aeque oportere rationibus ei has, unum case ut qui, eum ne hinc eligendi. Nam no harum omnium, id nominavi comprehensam pri.
      </p>

      <form>
        <div class="container">
          <div class="row">
            <div class="col">
              <div class="form-group">
                <label for="name-input">Name</label>
                <input type="text" class="form-control form-control-lg" id="name-input" aria-describedby="nameHelp">
              </div>
              <div class="form-group">
                <label for="email-input">E-mail</label>
                <input type="email" class="form-control form-control-lg" id="email-input" aria-describedby="emailHelp">
              </div>
              <div class="form-group">
                <label for="phone-input">Phone number</label>
                <input type="tel" class="form-control form-control-lg" id="phone-input" aria-describedby="phoneHelp">
              </div>
            </div>
            <div class="col">
              <div>
                <label for="description-input">How can we help you?</label>
                <textarea class="form-control form-control-lg" id="description-input"></textarea>
              </div>
            </div>
          </div>

          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>

  </div>
</section>

我错过了什么？

Answer 1

只需使用 Bootstrap h-100 class。请记住 height:100% 仅在 parent has a defined height 时有效。因此，在内部 div 和文本区域上都使用 h-100。

https://codepen.io/anon/pen/ePBXKR

<section class="contact-us">
  <div class="container" style="background-color: #D6EEFD">
    <div class="p-3">
      <h1 class="primary-brand">
        Title
      </h1>
      <p class="primary-brand">
        Eam ex scaevola eloquentiam, ex possim torquatos per. Pro an mnesarchum assueverit. Aeque oportere rationibus ei has, unum case ut qui, eum ne hinc eligendi. Nam no harum omnium, id nominavi comprehensam pri.
      </p>

      <form>
        <div class="container">
          <div class="row">
            <div class="col">
              <div class="form-group">
                <label for="name-input">Name</label>
                <input type="text" class="form-control form-control-lg" id="name-input" aria-describedby="nameHelp">
              </div>
              <div class="form-group">
                <label for="email-input">E-mail</label>
                <input type="email" class="form-control form-control-lg" id="email-input" aria-describedby="emailHelp">
              </div>
              <div class="form-group">
                <label for="phone-input">Phone number</label>
                <input type="tel" class="form-control form-control-lg" id="phone-input" aria-describedby="phoneHelp">
              </div>
            </div>
            <div class="col">
              <div class="h-100">
                <label for="description-input">How can we help you?</label>
                <textarea class="form-control form-control-lg h-100" id="description-input"></textarea>
              </div>
            </div>
          </div>

          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>

  </div>
</section>

由于 Bootstrap 4 使用 flexbox，列 (col) 将具有相同的高度。

Bootstrap 4 textarea 填充剩余的第二列高度

Bootstrap 4 textarea fill remaining 2nd column height

html

css

bootstrap-4

height

multiple-columns