reacrt，引入ant mobile里的IndexBar序列组件，上下拖动连同顶部导航栏也一起拖出屏幕外的问题

Question

在使用的react版本

已写的代码

import { NavBar } from 'antd-mobile';
import { IndexBar, List } from 'antd-mobile';
import './style.css';
const charCodeOfA = 'A'.charCodeAt(0);
  const groups = Array(26)
    .fill('')
    .map((_, i) => ({
    title: String.fromCharCode(charCodeOfA + i),
    // items: getRandomList(3, 10).map(() => lorem.generateWords(2)),
    items: [1,2,3,4,5],
}));
export default class CityList extends React.Component {
render() {
        return <div>
          <div className='nav'>
        <NavBar onBack={()=>window.history.back()}>城市选择</NavBar></div>
<div style={{ height: window.innerHeight }}>
  <IndexBar>
        {groups.map(group => {
            const { title, items } = group;
            return (<IndexBar.Panel index={title} title={`标题${title}`} key={`标题${title}`}>
              <List>
                {items.map((item, index) => (<List.Item key={index}>{item}</List.Item>))}
              </List>
            </IndexBar.Panel>);
        })}
      </IndexBar>
      </div>
        </div>
    }
}

上下拖动屏幕时出现问题，列表连同顶部导航栏也一起拖出屏幕外

顶部导航栏的默认样式

列表的默认样式

请问如何才能让顶部NavBar固定在顶部不动，且不被拖出屏幕外？

Answer 1

height: window.innerHeight - 50，这个高度需要减去nav的高度