Question

所以基本上我有2列，一列有一些输入，一列只有一个textarea。问题是我希望第二列中的textarea填充第一列的剩余高度，但我无法正常工作。我尝试将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类。请记住，height:100%仅在parent has a defined height时有效。因此，在内部div和textarea上都使用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填充剩余的第二列高度

1 个答案: