Theo's Typesafe CultTTC
Theo's Typesafe Cult•2y ago•
38 replies
kal

Include padding bottom when overflow-y-scroll

I have an element that needs to be scrollable. Specifically, this element is the parent element that encapsulates all elements bar my sidebar (im using nextjs, this element is element that encapsulates children in the root layout).

I would like that when the element is scrolled, that the bottom padding is also included in the scroll, e.g if we were to scroll all the way down the page, the bottom padding on the element should be visible. Currently, when we scroll all the way down the element, the page cuts off before the bottom padding is displayed. (In the image attached, I have scroll the page all the way down)

RootLayout:
import type { Metadata } from "next";
import "./globals.css";
import { SideNavBar } from "./_components/layout/SideNavBar";

export const metadata: Metadata = {
  title: "next Chessalyze",
  description: "chess with your friends!",
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="h-full">
      <head></head>
      <body className="bg-stone-700 text-orange-50">
        <div className="flex h-screen w-full flex-row ">
          <SideNavBar />
          <div className="h-full w-full overflow-y-auto p-3 lg:p-5">
            {children}
          </div>
        </div>
      </body>
    </html>
  );
}
Was this page helpful?