javascript - Fluent UI 读取 DetailsList 的 ViewPort 的高度

Question

我DetalisList在ScrollablePane组件内使用以保持标题可见，并让行可滚动。但是，这需要我手动设置可滚动容器的高度。

div.scrollable-container
    ScrollablePane
        DetailsList

当我调查 DetalisList 的 DOM 元素时，我可以看到它包含在 ViewPort 元素中。该元素的高度是构成列表的所有组件（列标题、行等）的高度总和的实际高度。因此，我希望能够读取这个值并根据它是否超过某个值来设置容器高度。

有没有一种很好的方法来访问 ViewPort 的高度？我总是可以查询 DOM 并找到元素，但我想避免依赖组件的内部结构。

因此，到目前为止，我找不到任何有关此的信息。我注意到DetailsList需要一个名为的道具viewport，但我认为这不是我想要的。

score 1 · Accepted Answer

您可以尝试以“vh”（视口高度）为单位给出高度。例如，

const gridContainerStyle: IStackStyles = {
   root: { height: "70vh", position: "relative" },
 };

1 回答 1