如何设置textarea「commentaire-rdv」占满父元素col-lg-6的可用高度？

嘿，我来帮你搞定这个问题！要让id为commentaire-rdv的textarea填满父列的剩余高度，最灵活的方式是用Flexbox来调整内部布局——毕竟Bootstrap本身就大量用了Flex，适配起来毫无压力。

具体步骤如下： #

1. 把列容器改成垂直Flex布局
   首先让.col-lg-6.zone-padding变成flex容器，垂直排列内部元素，同时让它有足够的高度（比如占满视口高度，或者继承父容器的高度）：

.col-lg-6.zone-padding {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 这里可以根据你的实际布局调整，比如父容器是固定高度就用height: 100% */
  gap: 1rem; /* 可选，给元素之间加些间距，看起来更舒服 */
}

2. 让textarea的容器占据剩余空间
   列里的h1和前三个.info-rdv都是固定高度的内容，我们只需要给包含textarea的那个.info-rdv设置flex-grow: 1，让它自动吃掉列里剩下的所有空间：

.info-rdv:last-child {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

3. 让textarea填满它的容器
   最后给textarea设置flex-grow: 1，让它占满父容器的高度，同时保证宽度100%：

#commentaire-rdv {
  flex-grow: 1;
  width: 100%;
  resize: none; /* 可选，如果你不想让用户调整textarea大小的话 */
}

完整代码示例 #

把这些CSS加到你的页面里，HTML结构不需要改动，最终效果就出来了：

<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...</textarea>
    </div>
  </div>
</div>

<style>
.col-lg-6.zone-padding {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  gap: 1rem;
}

.info-rdv:last-child {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

#commentaire-rdv {
  flex-grow: 1;
  width: 100%;
  resize: none;
}
</style>

为啥选Flexbox？ #

• 不用手动计算上面元素的总高度，自动适配剩余空间，不管屏幕尺寸怎么变都没问题
• 和Bootstrap的原生布局完美兼容，不会搞乱其他样式
• 响应式友好，在小屏幕上（比如lg断点以下）也能正常工作

内容的提问来源于stack exchange，提问作者Pierre-Clément Cazon