html - 如何设置textarea的高度填满整列？

Question

我正在使用 bootstrap-4 编写简单的联系表。我有 1 行 2 列。左列包含输入文本对象和选择对象。右列包含文本区域。我试着让 textarea 的高度与左栏的高度相同。

我将 h-100 类应用到 textarea 和父 div，但它比左列高。

截图链接:https://i.imgur.com/Lrfwhtn.png

<div id="content" class="margin-from-nav">
    <div class="container">
        <form>
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                    <div class="form-group">
                        <label for="inputName1">Imię</label>
                        <input type="text" class="form-control" id="inputName1" placeholder="Imie">
                    </div>
                    <div class="form-group">
                        <label for="inputName2">Nazwisko</label>
                        <input type="text" class="form-control" id="inputName2" placeholder="Nazwisko">
                    </div>                  
                    <div class="form-group">
                        <label for="inputEmail4">Adres e-mail</label>
                        <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label class="mr-sm-2" for="inlineFormCustomSelect">Temat zapytania</label>
                        <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
                            <option selected>Wybierz temat...</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                    <div class="form-group h-100">
                        <label for="exampleFormControlTextarea1">Treść wiadomości</label>
                        <textarea class="h-100 form-control" id="exampleFormControlTextarea1" rows="10"></textarea>
                    </div>
                </div>          
            </div>
        </form>     
    </div>
</div>

Answer 1

您可以使用 flexbox 实用程序类 (d-flex flex-column) 使文本区域填充剩余高度 (flex-grow-1):

       <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 d-flex flex-column">
            <div class="form-group flex-grow-1 d-flex flex-column">
                 <label for="exampleFormControlTextarea1">Treść wiadomości</label>
                 <textarea class="form-control flex-grow-1" id="exampleFormControlTextarea1"></textarea>
            </div>
       </div> 

演示:https://www.codeply.com/go/2z4ckbR2FU