# 利用文本域填充剩余空间

* 抖音：[https://v.douyin.com/hcB74Lu/](https://v.douyin.com/hcB74Lu/)
* B站：[https://www.bilibili.com/video/BV1RF411h79F/](https://www.bilibili.com/video/BV1RF411h79F/)

大家好！这是一个小伙伴之前遇到的问题：

那这是一个模拟的demo

产生这个问题的原因是

外面这个面板

被设置了一个百分比的高度

我们把这个百分比的高度先注释掉

大家看

这就没有问题了

那如果一定要用这个百分比的高度

应该怎么解决呢

我们可以把活动形式

这个文本域利用起来

让它可以

自适应去填充剩余的空间

那针对这个思路呢

我们有两个方法来解决

先说第一个

首先我们先把表单的区域标记出来

大家看现在表单是被内容撑起来的

他没有设置高度

所以首先我们先把表单设置一个高度

百分之百

好可以了

那旁边这些留白是面板的padding

我们先不管它

我们先把这一行设置一个样式

活动形式

class 等于

my feel 吧

然后呢

my feel

要设置一个

高度等于

c a

c a l c

减去一个固定的高度

这个固定高度应该是

其他的内容

高度的总和。比如 活动性质 加上 特殊资源

加上下面这个按钮

我就先随便写一个

比如200

那二百不行

240

差不多

我们把这个背景颜色放到 myfill 上

好大家看现在可以了

接下来呢就让里面的文本框也要百分之百

那这个就是这样

myfill 里面的我先用\*星吧

height等于填充满

大家看！现在可以了

但是呢 太小了还会出问题

所以这块我们还需要给整个的面板

加一个最小高度

来限制他缩放的太小

min-height

我们来一个400

好这回就可以了

我们再把这个背景颜色去掉

好解决了

这是第一种方案

那第二个方案呢

我们可以用 flex 布局

这地方就不需要用计算百分比了

这个还保留

首先我们把

myform 改成 flex 布局

直接 flex 呢他是这样的横向布局

我们需要把方向再调整一下

flex-direction

好那接下来呢

我们只需要把 myfill 改成 flex-grow:1

flex-grow 等于 1

也就是说 让活动形式这行

自动填充剩余的空间

我们刷新一下

大家看！可以了

好今天就到这里谢谢大家
