Angular 6动画中的window.innerHeight不起作用

我对我的问题有点困惑，因为它将在本地运行，但不会在服务器上运行

其想法是使用

窗口将表格从状态增加的状态设置为状态减少的状态（反之亦然）。innerHeight

减去静态值（例如150），同时细节卡在帧内或帧外移动

app.ts:

animations: [
trigger('BodyDetailsInOut', [
  state('in', style({ transform: 'translateY(0)' })),
  state('out', style({ transform: 'translateY(100%)' })),
  transition('out => in', [style({ opacity: 0, transform: 'translateY(100%)' }), animate('400ms ease-in')]),
  transition('in => out', animate('400ms ease-out')),
]),
trigger('TableReduceIncrease', [
  state('reduced', style({ height: window.innerHeight - 750 + "px" })),
  state('increased', style({height: window.innerHeight - 150 + "px" })),
  transition('increased => reduced', [style({ height: window.innerHeight - 150 + "px" }), animate('400ms ease-in')]),
  transition('reduced => increased', animate('400ms ease-out')),
])]

然而，它在本地运行良好，但在服务器上表并没有减少

在控制台中出现如下警告：

属性高度的关键帧值无效：-150px

---

顺便说一句。。这可能是服务器设置问题还是完全不允许这样设置高度？

窗口的高度可以通过

height:100vh

获得，这意味着“视口高度”。您可以使用

height:calc（100vh-750px）

进行计算，但它仅适用于最新的浏览器。当您谈论服务器时，您是在谈论服务器端渲染吗？最后，您可以利用

位置：fixed

并将样式设置如下：

框大小：内容框；填充：375px0px；最大高度：100vh@trichetriche:我在上面。。嗯，它在铬上工作得很好！非常感谢你！我在Chrome、Edge和Firefox上进行了测试。每个浏览器显示的内容都不同。在Chrome上运行得最好。稍加调整就能解决这个问题。