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

Question

我正在使用 bootstrap 和纯 HTML CSS。我有一个 <div> 标签，它包含 2 divs，其中第一个 <div> 有一个 Bootstrap form-group 和一个 btn-primary。我希望文本输入的表单 vertically 以填充它所在的 <div> 的可用 height，在示例中下面的代码是 class="rightupper"。目前我在 textarea 中使用了 style="height: 30vh;" 的样式属性设置，它不 fit/fill 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">更改为fit/fill包含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;
}

Answer 1

我准备了2个方法

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

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

为了占据 space 的 100%（或者更确切地说，为标题和按钮留下 space 的 60%），我将 css .form-group 添加到参考指示的内容和文本区域 (#descriptionInput) 的标签，该标签利用了前一个 div.

的 space 的 100%

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

run codeply

第二种方法基于FLEX.

在这种方法中，我使用自然包含在 bootstrap 4.

中的 flex

我们的想法是创建区域，您可以在其中配置 flex 用来定位 objects 以及何时更改分辨率。

Flex 遵循 parent-child 概念。因此，如果您向 parent 声明 flex，那么您将配置 child 的响应方式。

如果您注意到了，我添加了类（标题、文本和机器人）以向其行为提供div相同的配置。我在css里面包含了一些设置，这样：textarea使用了space的1005，剩下的只占用了5vh。

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

run codeply

有关此类方法的更多详细信息，您可以参阅link

祝你好运！

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

How to configure a Bootstrap textarea element to fill the parent div vertically?

html

css

twitter-bootstrap

bootstrap-4

textarea