流畅的用户界面读取详细信息列表视口的高度

Question

我在ScrollablePane组件中使用DetalisList来保持标题在视图中，并使行可以滚动。然而，这需要我手动设置可滚动容器的高度。

div.scrollable-container
ScrollablePane
DetailsList

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

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

到目前为止，我找不到任何关于这方面的信息。我注意到DetailsList使用了一个名为viewport的道具，但我认为这不是我想要的。

Answer 1

您可以尝试在"vh"；(视口高度(单位。例如，

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