利用文本域填充剩余空间
大家好！这是一个小伙伴之前遇到的问题：
那这是一个模拟的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
也就是说 让活动形式这行
自动填充剩余的空间
我们刷新一下
大家看！可以了
好今天就到这里谢谢大家
最后更新于
这有帮助吗？