填充所有可用高度的输入

Question

我想设置我的文本区域 "comment-rdv" 的高度，以便它占据其父项 "col-lg-6" 的可用高度。这是我当前的代码：

<div class="row">
    <div class="col-lg-6 zone-padding">
        <h1>Title</h1>
        <div class="info-rdv">Text 1</div>
        <div class="info-rdv">Text 2</div>
        <div class="info-rdv">Text 3</div>
        <div class="info-rdv">
            <b>Comment :</b>
            <textarea class="form-control" id="commentaire-rdv">Not defined</textarea>
        </div>
    </div>
    <div class="col-lg-6 zone-padding">
        <div class="box">
            <div class="box-content inner-content-div"> <!-- height = 320px; -->
                <!-- content -->
            </div>
        </div>
    </div>
</div>

预先感谢您的帮助。

Answer 1

您可以通过使容器弯曲并提供文本区域 flex-grow:1 来做到这一点（在下面的代码段中使用整页或 bootply link 并在桌面上查看）：

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css");

/* CSS used here will be applied after bootstrap.css */
.zone-padding {
  border:1px solid red;
}
/* below 2 styles are to get equal height columns */
.box-content {
  height:320px;
}
.zone-padding {
  display:flex;
  flex-direction:column;
}

/*below styles are to get textarea to fill div*/
.info-rdv.flex {
  flex-grow:1;
  display:flex;
  flex-direction:column;
}
.info-rdv.flex textarea {
  flex-grow:1;
}

<div class="row">
    <div class="col-lg-6 zone-padding">
        <h1>Title</h1>
        <div class="info-rdv">Text 1</div>
        <div class="info-rdv">Text 2</div>
        <div class="info-rdv">Text 3</div>
        <div class="info-rdv flex">
            <b>Comment :</b>
            <textarea class="form-control" id="commentaire-rdv">Not defined</textarea>
        </div>
    </div>
    <div class="col-lg-6 zone-padding">
        <div class="box">
            <div class="box-content inner-content-div"> <!-- height = 320px; -->
                <!-- content -->
            </div>
        </div>
    </div>
</div>

Example bootply

填充所有可用高度的输入

Input which fills all the available height

html

css

height