# 利用文本域填充剩余空间 * 抖音： * B站： 大家好！这是一个小伙伴之前遇到的问题： 那这是一个模拟的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 也就是说 让活动形式这行 自动填充剩余的空间 我们刷新一下 大家看！可以了 好今天就到这里谢谢大家 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://sunzsh.gitbook.io/xiaoshan.bug/li-yong-wen-ben-yu-tian-chong-sheng-yu-kong-jian.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.