流利的UI读取DetailsList的ViewPort的高度

问题描述

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

div.scrollable-container
    ScrollablePane
        DetailsList

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

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

到目前为止，我还没有找到任何相关信息。我注意到DetailsList接受了一个名为viewport的道具，但我认为这不是我想要的。

解决方法

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

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