如何在 NG-ZORRO 中使 textarea 适合其父元素的高度？答案

【问题标题】：How to make textarea fit its parent element's height in NG-ZORRO?如何在 NG-ZORRO 中使 textarea 适合其父元素的高度？
【发布时间】：2021-04-06 14:46:14
【问题描述】：

我正在使用“nz-form”形式的nz-input textarea。

我不知道如何使 textarea 适合其父级的高度。

Demo

现状如下：

我想要的是：

我知道问题出在哪里

如果我直接为div和textarea这两个设置style="height:100%"，那么我可以得到目标。但是，这两个 div 实际上不在我组件的模板 html 上。所以，我不知道如何解决这个问题。我试图覆盖 'ant-form-item-control-input-content' css 类，但它不起作用。

【问题讨论】：

您提供的示例似乎无法编辑。你能用可编辑的代码创建一个例子吗？
基于 techuila 的回答 stackblitz.com/edit/angular-ivy-fin1te。注意：要设置这2个div的样式，您需要：更改组件封装，或使用ng-deep，或设置styles.css中的样式。
@StepUp 我已经更新了演示链接。
@XieSteven 你看过我发布的 stackblitz 了吗？
@David 我已经检查过了。它也没有工作。在我的本地项目中，我在 style.css 中导入了ng-zorro-antd.less。见stackblitz.com/edit/angular-ivy-8ur6mq?file=src/styles.css

标签： css angular ng-zorro-antd

【解决方案1】：

我在使用 antd 时也遇到了类似的问题。当我想适应父高度的剩余空间时，我的解决方案总是使用flexbox。

我无法从您的代码中为您提供确切的代码示例，因为您提供的链接不可编辑，我可以给您的是一个示例，说明我是如何通过从页面的 inspect element 编辑它来做到这一点的.

截图输出

首先是将form标签的display属性更改为flex，并将其flex-direction设置为column。

表格

<form id="my-form">
  // nz-input elements
</form>

表格样式

form#my-form {
  display: flex;
  flex-direction: column;
}

接下来，删除您在第二个nz-form-item 上创建的height（其中包含标签内容和文本区域）。

并将该元素的display 设置为flex 和flex-direction: column，因此我们将能够正确设置height: 100%，而其中的所有div 元素（包括textarea）都没有问题.

此样式适用于form 元素内的第二个nz-form-item

element.style {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

我添加了一个flex-grow: 1，因为我们希望第二个nz-form-item 占据parent 元素的剩余空间，即form 元素。

注意：使用height: 100% 会复制form 元素的高度，我们不希望这种情况发生，也不会使用这种样式。

现在，我们还想在nz-form-control 上设置flex-grow: 1; 以占用其父级（即nz-form-item）的剩余空间，

最后直接为div和textarea这两个设置style="height:100%"，就大功告成了！

你可以看到我设置的样式从nz-form-control到textarea

如果您要更新帖子上可编辑的链接，我可以为您提供一个清晰的示例。但目前，我只能为您提供有关如何解决问题的描述性步骤。

最后编辑

我已经在 stackblitz 上编辑了你的代码，你可以看看结果in this link. :)

感谢Sameer，它帮助我使用::ng-deep 创建了这个答案。没有它，我无法在 nz-form-item 标签下的 2 个 div 上添加样式。

输出

【讨论】：

这里是演示：github.com/XavierMessi/ant-demo/blob/main/ant-demo.7z
不知道angular怎么用，只能帮你搞css样式，能提供在线demo吗？
请检查此链接是否可编辑。 stackblitz.com/edit/angular-ivy-8ur6mq?file=src/app/…
@XieSteven 我编辑了我的答案，看看我编辑的链接。
它在我的本地 Angular 项目中不起作用。我稍后会上传一个完整的演示。

【解决方案2】：

看看是否有帮助，将 full-textarea 类添加到 textarea 的 nz-form-control 和 CSS 下面到您各自组件的 CSS 文件中。

.full-textarea ::ng-deep .ant-form-item-control-input {
  height: calc(100% - 110px);
}
.full-textarea ::ng-deep .ant-form-item-control-input-content {
  height: 100%;
}
.full-textarea textarea {
  height: 100%;
}

【讨论】：

【解决方案3】：

如果我直接给两个div和textarea设置style="height:100%"，那么就可以得到目标了。但是，这两个 div 实际上不在我组件的模板 html 上。所以，我不知道如何解决这个问题。我试图覆盖 'ant-form-item-control-input-content' css 类，但它不起作用。

所以当您尝试覆盖 css 时，您是否只覆盖了 .ant-form-item-control-input-content？或者您是否还覆盖了 .ant-form-item-control-input？你说当 div 和 textarea 的高度都为 100% 时它有效，但只说你覆盖了 CSS 中的一个 div。

【讨论】：