Javascript 使列表的高度填充整个页面

我目前正在尝试制作一个页面，其中一半是地图，另一半是列表。我想让列表的高度填满整个页面，但我似乎找不到正确的方法。我使用react虚拟化列表代码库作为起点，在该代码中，您通过传入listHeight来指定高度维度。但我希望列表高度根据屏幕大小动态变化

<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>

我尝试过使用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>

{（{width}）=>(
)}

do

style={{height:“100vh”}

---

这将占用窗口的整个垂直高度

try

height:100vh

，vh是视口高度我也尝试过，没有luckdefine视图端口的元标记，然后尝试

height:100vh