javascript - 使列表的高度填满整个页面
问题描述
我目前正在尝试制作一个页面,其中一半是地图,另一半是列表。我想让列表高度填满整个页面,但我似乎找不到正确的方法。我使用 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>
解决方案
做style = {{height: "100vh"}}
这将占用窗口的整个垂直高度
推荐阅读
- actions-on-google - Action 已通过认证测试,但仍无法在 Google Home 应用中找到
- c++ - 为什么表达式 (int) +1e10 不会产生 CSAPP 描述的 -2147483648?
- python - 我如何做到这一点,当我打印 Python 列表时,当我打印列表时,每个项目都没有单引号和括号?
- visual-studio-code - 如何配置 svelte 格式化程序以尊重 HTML 中的换行符?
- javascript - 如何从 Chrome 控制台单击时调用 html 函数?
- c - 如何在C中读取和扫描文件的结构记录
- javascript - 如何动态显示消息 react-router-dom
- javascript - Nightwatch JS 中的异步命令执行
- r - 有没有办法创建一个循环来查找数据集中的特定方法?
- python - 烧瓶如何在扩展模板中获取变量