Javascript 仅使内容可滚动，而其他两个组件是固定的

我正在创建一个网站，我只需要一部分的网页滚动和其他保持固定。例如，“关于我们”页面应该有固定的导航和左侧面板，而页面上的其他内容可以滚动。如何做到这一点

我尝试将导航和左侧面板（我们称之为信息）包含到页面的每个组件中。但这似乎不是一个解决办法。此外，我还尝试将导航和信息组件包括到Router元素中，但在这样做时，布局无法正常工作，因为这两个元素在我的示例中具有position:fixed

import React from 'react';
import Navigation from './Navigation';
import Information from './Information';

const AboutPage = () => (
  <div>
    <Information />
    <Navigation />
    <section className='about'>
      <div className='container'>
        <div className='about__content'>
          <h1>About page</h1>
          <p>
            Irure amet occaecat nostrud dolor aliquip est
            sint laborum eiusmod. Irure do nostrud nulla
            esse do incididunt ad proident nostrud. Labore
            culpa ullamco labore qui deserunt ad proident
            veniam. Adipisicing excepteur ex aliqua
            cupidatat irure aliquip.
          </p>
        </div>
      </div>
    </section>
  </div>
);

export default AboutPage;

从“React”导入React；
从“./Navigation”导入导航；
从“./Information”导入信息；
const AboutPage=（）=>(
关于页面

如果你是我的朋友，我会告诉你的
圣拉布拉姆艾乌斯莫德伊鲁尔诺斯特鲁德诺拉酒店
我是诺斯特鲁德·劳尔
乌拉姆科的罪过是不可原谅的
不动产除外
丘比特·伊鲁尔·阿利奎普。

);
导出默认值约为页；

从“React”导入React；
常量信息=（）=>(
让我们了解传播疾病的情况。
报告它。
斯维卡塔

);
导出默认信息；

从“React”导入React；
从'react router dom'导入{NavLink}；
常量导航=（）=>(


关于


报告


);
导出默认导航；

设置

max height

和

overflow-y：滚动到您想要滚动的组件，也要确保高度更小，这样内容会溢出下端。但是如果我想在每个页面上都包含导航和信息组件，我应该怎么做？因为样式会中断。如果你想在每个站点上使用它，请考虑使用它在代码< >交换机>代码>组件> >路由器DOM< /代码>以使它在每个站点上可见，我修正了这个问题。但是一个新的出现了。每个页面似乎都很好，但ReportPage有一个令人讨厌的bug。当您打开它时，组件的宽度会发生一些变化。我不知道为什么会这样，我想尽了一切办法，但没有找到解决办法。如果有人需要更多的上下文，我将粘贴我项目的github链接。尝试使用检查器（浏览器中的F10左右）查看它，而且，我每次都在CSS内部执行
*{box size:border box；}
，以确保正确的宽度
import React from 'react';

const Information = () => (
  <div className='information'>
    <h2>Let us know about spreading diseases.</h2>
    <h1>Report it.</h1>
    <p>sveikata.lt</p>
  </div>
);

export default Information;

import React from 'react';
import { NavLink } from 'react-router-dom';

const Navigation = () => (
  <nav className='navigation'>
    <ul>
      <li>
        <NavLink to='/'>about</NavLink>
      </li>
      <li>
        <NavLink to='/report'>report</NavLink>
      </li>
    </ul>
  </nav>
);

export default Navigation;