Scroll Issue on mobile

I am facing an issue with scrolling CSS on my mobile devices. I have attached an image. due to the 100vh height, I can’t scroll to my main body. the bottom part gets obscured by the bottom nav. then I removed the 100vh but it still isn’t working.

import React, { ReactNode, useEffect } from "react";
import Header from "../LeftSide/Header";
import LeftSide from "../LeftSide/LeftSide";
import "./Layout.css";

interface Props {
  children?: ReactNode;
}
const Layout = ({ children, ...props }: Props) => {
const [collapsed, setCollapsed] = React.useState(false);
const handleValueChange = (value: any) => {
  setCollapsed(!collapsed);
};

useEffect(() => {
  window.scrollTo(0, 0);

  if (window.innerWidth <= 1000) {
    setCollapsed(true);
  }
}, []);

return (
  <>
    <div className="d-flex" style={{ height: "100vh", overflow: "hidden" }}>
    <div className="mobileSidebar">
      <LeftSide collapsed={collapsed} setCollapsed={setCollapsed} />
    </div>
    <div style={{ width: "100%" }}>
      <Header onValueChange={handleValueChange} />
        <div {...props}>{children}</div>
      </div>
    </div>
  </>
 );
};

export default Layout;

You need to sign in to view this answers