Question Details

No question body available.

Tags

reactjs next.js tailwind-css

Answers (2)

Accepted Answer Available
Accepted Answer
June 21, 2025 Score: 1 Rep: 19,072 Quality: High Completeness: 60%

I tried running your code, but it threw an error. The problem was an incorrect HTML structure. Once I fixed it, the result was correct, and the footer appeared at the bottom of the page. I believe it worked on your local environment even with the incorrect structure because the browser tried to fix the error by itself, but it ended up closing the
tags incorrectly.

The error was in the Home component: the closing tag for div.relative.w-full.h-screen was in the wrong place. It should have been before the first , but instead, it was placed after the second .

I marked with comments the change in the example.

function Home() {
  return (
        

          

            Background
          

          

            

              

                The exchange site for vacations between trusted individuals
              

            
              Get Started
          

        
 {/ CHANGED: Added missing closing
/}

Get in Touch

Explore Listings

{/
/} {/ CHANGED: Removed unnecessary
/}

); }

function Footer() { return (

© {new Date().getFullYear()} Company name. All rights reserved.

); };

function App() { return (

); }

ReactDOM.createRoot(document.getElementById("root")).render();

June 21, 2025 Score: 0 Rep: 110 Quality: Low Completeness: 60%

Ensure both and fill the viewport:

html, body {
  height: 100%;
  margin: 0;
}

Make the body a column-flex container:

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh; 
}

Let flex-grow and push down:

main {
  flex: 1;
}
footer {
  margin-top: auto;
}

Full code:

    html, body {
      height: 100%;
      margin: 0;
    }
    body {
      display: flex;
      flex-direction: column;
      min-height: 100dvh;
    }
    main {
      flex: 1;
    }
    footer {
      margin-top: auto;
      background: #eee;
      padding: 1rem;
    }
  
Header
    
Your content goes here...
    
Footer stays at the bottom.