如何配置 Bootstrap textarea 元素以垂直填充父 div？答案

【问题标题】：How to configure a Bootstrap textarea element to fill the parent div vertically?如何配置 Bootstrap textarea 元素以垂直填充父 div？
【发布时间】：2021-04-08 16:12:31
【问题描述】：

我正在使用引导程序和纯 HTML CSS。我有一个<div> 标签，它包含2 个div，其中第一个<div> 有一个Bootstrap form-group 和一个btn-primary。我希望文本输入表单垂直展开以填充它所在的<div> 的可用高度，在下面的示例代码中为class="rightupper"。目前我在textarea 中使用style="height: 30vh;" 的样式属性设置，它不适合/填充它需要垂直的div。水平宽度似乎工作正常。

HTML 代码：

<div class="right">
        <div class="rightupper">
            comments:
            <hr>
            <div class="form-group">
                        
                <textarea class="form-control w-100" style="height: 30vh;" id="descriptionInput" rows="3"></textarea>
            </div>
            <button class="btn btn-primary" type="button">Click Btn</button>

        </div>    
        <div class="rightlower">
            out text
            <hr>
        </div>
    </div>
</div>

应如何更改 <div class="form-group"> 或 <textarea class="form-control w-100" style="height: 30vh;" id="descriptionInput" rows="3"> 以垂直适合/填充包含的 div？

这里是这些 div 的相关 CSS；


.right {
  height: 100vh;
  width: 20%;
  border: 2px solid blue;
}
.rightupper {
  height: 50vh;
  width: 100%;
  background-color: rgb(190, 190, 190);
}
.rightlower {
  height: 50vh;
  width: 100%;
  background-color: rgb(190, 190, 190);
  border-top: 5px solid blue;
}

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 textarea

【解决方案1】：

我准备了2个方法。

第一个是简单的解决方法。

第一件事是将焦点从宽度的 20% 更改为 col-3，即 Bootstrap 识别为 ~ 20%。这使您在分辨率变化时更容易调整宽度。在示例中，我包括在降低分辨率时，使用 50% 的宽度。您可以稍后更改。

为了占据 100% 的空间（或者更确切地说是 60% 为标题和按钮留出空间），我包含了 css .form-group 来引用所指示的内容和 textarea (#descriptionInput) 的标签充分利用了前一个 div 的 100% 空间。

我不太喜欢这种方法，因为分辨率的变化需要调整高度。你必须用断点解决。

run codeply

第二种方法是基于FLEX。

在这种方法中，我使用了 flex，它自然包含在 bootstrap 4 中。

这个想法是创建区域，您可以在其中配置 flex 定位对象以及分辨率何时发生变化。

Flex 遵循父子概念。因此，如果您向父级声明 flex，会发生什么是您配置子级将如何响应。

如果您注意到的话，我包含了类（title、text 和 bot）来为它们的行为提供单独的配置。我在css中包含了一些设置，使得：textarea占用了1005的空间，其余的只占用了5vh。

这样你可以为不同的分辨率配置它，它会根据分辨率调整高度。

run codeply

更多关于这类方法的细节，可以看link

祝你好运！

【讨论】：