使列表的高度填滿整個頁面

Question

我目前正在嘗試制作一個頁面，其中一半是 map，另一半是列表。 我想讓列表高度填滿整個頁面，但我似乎找不到正確的方法。 我使用 react-virtualized 列表代碼庫作為起點，在該代碼中，您通過傳入 listHeight 來指定高度維度。 但我希望 listHeight 根據您的屏幕尺寸是動態的。

我試過做 flex: 1, height: 100%，但它似乎不影響代碼。 我需要以某種方式使高度值等於屏幕尺寸的尺寸。

<div style={{flex: 1}}>
    <AutoSizer>
        {({width}) => (
            <List
                ref="List"
                className={styles.List}
                height={listHeight}
                overscanRowCount={overscanRowCount}
                noRowsRenderer={this._noRowsRenderer}
                rowCount={rowCount}
                rowHeight={
                    useDynamicRowHeight ? this._getRowHeight : listRowHeight
                }
                rowRenderer={this._rowRenderer}
                scrollToIndex={scrollToIndex}
                width={width}
            />
        )}
    </AutoSizer>
</div>

Answer 1

做style = {{height: "100vh"}}

這將占用 window 的整個垂直高度