Next.js Discord

Discord Forum

Footer overlaps with content

Answered
Swedish Lapphund posted this in #help-forum
Open in Discord
Swedish LapphundOP
Title
Answered by Swedish Lapphund
ah works, thanks a ton man!
View full answer

67 Replies

Swedish LapphundOP
how can I ensure that the footer is excluded from the space, can I add some margin in layout.tsx maybe?
Swedish LapphundOP
it does scroll, just part of it is hidden
@Ray Do you have an idea?
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
        <AppRouterCacheProvider>{children}</AppRouterCacheProvider>
        <Footer />
      </body>
    </html>
  )
}


Currently I've done this, gives what the last screenshot shows, not exactly it.
@Swedish Lapphund tsx export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en"> <body style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}> <AppRouterCacheProvider>{children}</AppRouterCacheProvider> <Footer /> </body> </html> ) } Currently I've done this, gives what the last screenshot shows, not exactly it.
Ray
oh try this maybe and remove position fixed on footer
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
    <div style={{ flex: 1 }}>
        <AppRouterCacheProvider>{children}</AppRouterCacheProvider>
</div>
        <Footer />
      </body>
    </html>
  )
}
Swedish LapphundOP
mhm that worked, however now it doesnt fill up the whole bottom
I've got white lines around it
Ray
you have padding on html?
Swedish LapphundOP
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
        <div style={{ flex: 1 }}>
          <AppRouterCacheProvider>{children}</AppRouterCacheProvider>
        </div>
        <Footer />
      </body>
    </html>
  )
}

none here, none in the Footer
Ray
html, body {
  padding: 0
  margin: 0
}
Swedish LapphundOP
in the globals.css?
Ray
yes
Swedish LapphundOP
would that apply to any body/html tag?
Ray
you only have one html/body
Swedish LapphundOP
aah ye right
@Swedish Lapphund Click to see attachment
Ray
you could remove left, right,bottom here too
Swedish LapphundOP
so here you meant right
Swedish LapphundOP
it did do smth, the text is now super close to the edge
actually, thats prob the initial change we did with the position and the change in the layout.css
btw, lets say I wish to exclude the footer on some routes, for instance /company/path*
could I do this? Or would I have to get rid of my footer in layout, and just drop it per page manually?
Ray
you could use route group for it
https://nextjs.org/docs/app/building-your-application/routing/route-groups
Swedish LapphundOP
ah great, let me try that real quick
I have auth in my middleware based on the routes
that shouldnt be affected should it
since it doesnt change the routes?
@Ray you recon each rout group should have its own compenents folder, style dir, etc?
Ray
no , for your case, you can create a group
(with-footer)/layout.tsx <-- put <Footer /> here
and move every page you want to have footer inside (with-footer)
@Ray and move every page you want to have footer inside (with-footer)
Swedish LapphundOP
what if the root page, the one inside app requires a footer too? Would I have to reroute the "main" app.tsx to the one in my with footer
Ray
you mean app/page.tsx?
Swedish LapphundOP
yes
Ray
move it inside (with-footer)
Swedish LapphundOP
that is legal?
Ray
sure why not
Swedish LapphundOP
doesnt the /app dir need one in its root?
Ray
(with-footer) is not a route segment
Swedish LapphundOP
ye
ah
ure right im just silly
okie I got it all to work now, except this footer not having a margin around it anymore and creating whitelines around it
also not entirely sure where this comes from
the site functions just fine, any idea what this could be?
I cleared cache and restarted the server already
this one too
Ray
you only need html and body tag in the root layout app/layout.tsx
Swedish LapphundOP
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
import Footer from './components/common/footer';

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Accessibility',
  description: 'D',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (

        <div style={{ flex: 1 }}>
          <AppRouterCacheProvider>{children}</AppRouterCacheProvider>
        </div>
        <Footer />
  )
}
so this in the (with-header)?
Ray
yes
return (
      <>
        <div style={{ flex: 1 }}>
          <AppRouterCacheProvider>{children}</AppRouterCacheProvider>
        </div>
        <Footer />
      </>
  )
Swedish LapphundOP
that fixes the errors, nice
but since the body isnt with the styling it does not stick to the bottom
<body style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
I applied it to the div now, that seems to work
seems like the minHeight decides where its put, any way to dynamically get it or nah
Ray
what do you mean?
Swedish LapphundOP
well with a 100 set as minHeight its currently down (i have to scroll)
to see it
now I can find +- the right value of minHeight to make it so its just at the bottom fo the screen
Ray
set your footer to fixed height, eg: 200px
then change minHeight to this calc(100vh-200px)
Swedish LapphundOP
ah works, thanks a ton man!
Answer