填充所有可用高度的输入
Input which fills all the available height
我想设置我的文本区域 "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>
预先感谢您的帮助。
您可以通过使容器弯曲并提供文本区域 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>
我想设置我的文本区域 "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>
预先感谢您的帮助。
您可以通过使容器弯曲并提供文本区域 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>