导航栏和页脚如何在react中固定

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  /* 其他样式 */
}

import React from 'react';
import './Navbar.css';

class Navbar extends React.Component {
  render() {
    return (
      <div className="navbar">
        {/* 导航栏内容 */}
      </div>
    );
  }
}

export default Navbar;

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
  /* 其他样式 */
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f2f2f2;
  /* 其他样式 */
}

import React from 'react';
import './App.css';

class App extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="content">
          {/* 页面主体内容 */}
        </div>
        <div className="footer">
          {/* 页脚内容 */}
        </div>
      </div>
    );
  }
}

export default App;