什么是 ngx-fill-height
ngx-fill-height 是一个基于 Angular 框架的 npm 包，它能为元素提供 100% 的高度，使得元素能够充满其父容器，同时保持比例。
安装 ngx-fill-height
使用 npm 安装 ngx-fill-height：
npm install ngx-fill-height --save
使用 ngx-fill-height
- 引入 ngx-fill-height
在需要使用 ngx-fill-height 的组件中引入 ngx-fill-height：
import { FillHeightModule } from 'ngx-fill-height';
@NgModule({
imports: [FillHeightModule],
...
})
export class YourModule { }- 在 HTML 模板中使用 ngx-fill-height
在需要充满父容器的元素上使用 fill-height 指令，并设置其要充满的父容器的选择器：
<div fill-height=".parent-container"> ... </div>
其中，.parent-container 是该元素所处的父容器的 CSS 选择器。
- 为 ngx-fill-height 添加样式
在 CSS 样式表中设置充满的元素的样式：
div[fill-height] {
height: 100%;
}示例代码
在应用中，我们需要让一个表格的每一行都充满整个父容器，代码如下：
-- -------------------- ---- -------
---- ------------------------
-------
--- -------------------------------
-------- ------
-------- ------
-------- ------
-----
--- -------------------------------
-------- ------
-------- ------
-------- ------
-----
--------
------在 CSS 样式表中，我们需要为元素添加以下样式，其中 .table-container 是父容器的 CSS 选择器：
-- -------------------- ---- ------- --------------- - -------- ----- --------------- ------- - --------------- - -- - ---------- -- -------- ----- --------------- ------- -
以上样式会让每一行的单元格充满父容器，并保持相同的高度。
总结
ngx-fill-height 能够让你的元素充满整个父容器，并保持比例，非常适合于那些需要在全部屏幕上均匀分布的组件和布局。使用 ngx-fill-height 只需要几个简单的步骤，不仅提高了开发效率，还使得代码更加简介清晰。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005587881e8991b448d5b7e