移动端底部固定布局

固定底部栏，并且不随着页面滑动（包括H5内的弹性滑动）

html {
  overflow: hidden;
}

.page {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: bisque;
  display: flex;
  flex-direction: column;
}

.content {
  overflow: auto;
  flex-grow: 1;
}

.bottom {
  width: 100%;
  height: 50px;
  background-color: aqua;
  flex-shrink: 0;
}

import './index.less';

export default function IndexPage() {
  return (
    <div className="page">
      <div className="content">
        <div style={{ height: '10000px', width: 10, backgroundColor: 'red' }}>
          内容区域
        </div>
      </div>
      <div className='bottom'>底部按钮</div>
    </div>
  );
}