Bootstrap 4 textarea заполняет оставшуюся высоту второго столбца

Question

так что в основном у меня есть 2 столбца, один с некоторыми входами и один только с текстовой областью.Проблема в том, что я хочу, чтобы текстовая область, которая находится во 2-м столбце, заполнила оставшуюся высоту первого, но я не могу заставить это работать.Я попытался дать текстовой области высоту 100%.

Вот ручка с примером:

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

<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.Помните, height:100% работает, только если родительский элемент имеет определенную высоту .Поэтому используйте h-100 как для внутреннего div, так и для textarea.

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.