如何在反应中设置边栏和内容高度？

我用reactJs制作了一个简单的网页。它仍然没有功能，但是在我想要设计和架构它之前。我在设计时遇到问题。当前它看起来像这样https://ibb.co/4TCRwTY，但是当我向下滚动时，它看起来像这样https://ibb.co/kJC3p9q我如何使其并排显示侧边栏和内容行，它们也不会t重叠页眉/页脚。另外，当向下滚动时，我希望边栏一直滚动到其内容的内容。我知道颜色看起来很荒谬，但是它们可以在视觉上区分组件。对于这个简单的网页，常规HTML / CSS（例如flexbox）是否是更好的选择，还是我应该考虑使用纯reactjs组件？任何帮助将不胜感激。谢谢

App.css

html, body {
    width: 100%;
    height: 100%;
    background: orange;
}
.sidenav { 
    float:left; 
    width:20%; 
    height: 100vh;
    background:darkslategray; 
    overflow-x: hidden; 
    padding-top: 60px;  
}
.sidenav p {
  padding-left: 45px;
  text-decoration: none;
  font-size: 20px;
  color: white;
}
.sidenav p:hover {
  color: blue;
}

.contents {
  height: 100vh;
  /* float:left; */
  padding: 60px 10px 60px 30px;
  background: gray; 
  align-items:center;
}

img {
    width: 800px;
    height: 1000px;
    margin-left: 80px;
  } 
header {
    position:fixed;
    width:100%;
    top:0px;
    background:darkslateblue;
    text-align: end;
    padding: 10px 20px 10px 0px;
    /* margin-bottom: 0!important; */
  }

footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    background: darkslateblue;
    text-align: end;
    padding: 10px 20px 10px 0px;
}

h3 {
  text-align: center; 
  font-size: 1.4em; 
  margin: 0px auto; 
  padding: 0px 0px 5px 0px; 
}

App.js

class App extends Component {
  constructor() {
    super();
  }
  render() {
    return (
      <>
        <Header/>
        <Sidebar/>
        <Footer/>
      </>
    );
  }
}
export default App;

Sidebar.jsx

const Sidebar = () => {
    return (
    <Router>
        <div className="sidenav">
            <Link to="/"><p>First Blog</p></Link>
            <Link to="/"><p>First Blog</p></Link>
            <Link to="/"><p>First Blog</p></Link>
            <Link to="/"><p>First Blog</p></Link>
            <Link to="/"><p>First Blog</p></Link>
            <Link to="/"><p>First Blog</p></Link>
        </div> 
        <div className="contents">
        <Switch>
            <Route exact path="/">
                <BlogContents/>
            </Route>
        </Switch>
        </div>
    </Router>
    );
  }

BlogContent.jsx

function BlogContents() {
    return (
        <>
            <h3>My Recent Trip</h3>
            <p>blablaa
                janjnkjadn
                nacndcjds
                j cjdcscsdc
                rfcscndcvnsj
                amns am dasd
                s cweurbfskjdncsknjc!jknckjnvkerjnvejvnernvernvfjnv,
                fv mc mdf cdf fd nd csdc dewd wedwedwedew aknxjanc
            </p>
            <img src="https://images.unsplash.com/photo-1560214482-85e7339701c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=902&q=80"/>
        </>
    );
  }

Footer.jsx

function Footer() {
    return (
    <footer>
        This is Footer
    </footer>
    );
  }

Header.jsx

function Header() {
    return (
        <header> Home | Contact </header>
    );
  }