Make height of list fill whole page

Question

I am currently trying to make a page with a map on one half and a list on the other. I want to make the list height fill the entire page but I can't seem to find the right way to do so. I am using the react-virtualized list codebase as a starting point and in that code you specify the height dimension by passing in listHeight. But I want the listHeight to be dynamic based on your screen size.

I've tried doing flex: 1, height: 100%, but it doesn't seem to affect the code. I need to somehow make the height value equal to the dimension of the screen size.

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

define the meta tag for the view-port, after that try `height:100vh` — Vikas Saini, Oct 20 '19 at 03:59

score 0 · Answer 1 · answered Oct 20 '19 at 05:11

0

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

this will take the entire vertical height of the window

answered Oct 20 '19 at 05:11

Ashrin Mathur

9
2

Make height of list fill whole page

1 Answers1