Question

我想设置textarea的高度＆＃34; comment-rdv＆＃34;这样它就占据了其父母的可用高度＆＃34; col-lg-6＆＃34;。这是我目前的代码：

<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

您可以通过使容器展开并提供textarea flex-grow:1（使用下面的代码段中的完整页面或bootply链接并在桌面上查看）来实现这一点：

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

Example bootply

填充所有可用高度的输入

1 个答案: