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

在使用的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固定在顶部不动，且不被拖出屏幕外？

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

你给 navbar 加个定位 固定定位