I want to About and Footer should have gap. My important Requirements are :
App.js
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom/client";
import Header from "./src/components/Header.js";
import Body from "./src/components/Body";
import Footer from "./src/components/Footer.js";
import About from "./src/components/About.js";
import Contact from "./src/components/Contact.js";
import Error from "./src/components/Error.js";
import RestaurantMenu from "./src/components/RestaurantMenu.js";
import { createBrowserRouter, RouterProvider, Outlet } from "react-router";
import useOnlineStatus from "./src/utils/useOnlineStatus.js";
import UserContext from "./src/utils/UserContext.js";
import { Provider } from "react-redux";
import appStore from "./src/utils/appStore.js";
import Cart from "./src/components/Cart.js";
const App = () => {
// For use of Context
const [userName, setUserName] = useState();
useEffect(() => {
setUserName("Kishor") // default value for context variable
}, [])
const onlineStatus = useOnlineStatus();
if (onlineStatus === false) {
return <div>Oops! No Internet. Try again. </div>
} else {
return (
<>
<Provider store={appStore}>
<UserContext.Provider
value={{ loggedInUser: userName, setUserName }}
>
<Header />
<Outlet />
<Footer />
</UserContext.Provider>
</Provider>
</>
);
}
};
const appRouter = createBrowserRouter([
{
path: "/",
element: <App />,
errorElement: <Error />,
children: [
{
path: "/",
element: <Body />,
},
{
path: "/about",
element: <About />
},
{
path: "/contact",
element: <Contact />
},
{
path: "/restaurants/:resId",
element: <RestaurantMenu />
},
{
path: "/cart",
element: <Cart />
},
]
}
]);
const root = ReactDOM.createRoot(document.getElementById("rootApp"));
root.render(<RouterProvider router={appRouter} />);
About.js
const About = () => {
return (
<div className="flex flex-col items-center shrink-0 flex-grow"> `// Note this line`
<h1 className="font-bold text-3xl m-4">About Us</h1>
<p className="mx-2 text-justify">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, officiis iusto. Autem, corporis architecto. Pariatur beatae ullam ducimus veritatis laboriosam velit aut facere quod dolorum.</p>
</div>
)
}
export default About;
Footer.js
import React from 'react';
import { Link } from "react-router";
import github_logo from '../assets/github_logo.png';
import instagram_logo from '../assets/instagram_logo.png';
import twitter_logo from '../assets/twitter_logo.png';
import facebook_logo from '../assets/facebook_logo.png';
const Footer = () => {
return (
<footer className='w-full border-t my-2 shrink-0 mt-auto'> `// Note this line`
<div className='grid grid-cols-2 w-[90vw] sm:w-[45vw] mx-auto p-1 gap-3 text-sm sm:text-base justify-items-center'>
<div className='w-[35vw] sm:w-[15vw] ml-5'>
<h1 className='font-bold mb-1'>Company</h1>
<Link to="/about"><p>About Us</p></Link>
<Link to="/"><p>Careers</p></Link>
<Link to="/"><p>Team</p></Link>
</div>
<div className='w-[35vw] sm:w-[15vw]'>
<h1 className='font-bold mb-1'>Contact Us</h1>
<Link to="/contact"><p>Help & Support</p></Link>
<Link to="/"><p>Partner with us</p></Link>
</div>
<div className='w-[35vw] sm:w-[15vw] ml-5'>
<h1 className='font-bold mb-1'>Legal</h1>
<Link to="/"><p>Terms & Conditions</p></Link>
<Link to="/"><p>Privacy Policy</p></Link>
</div>
<div className='w-[35vw] sm:w-[15vw]'>
<h1 className='font-bold mb-1'>Follow us on</h1>
<div className="flex gap-x-3">
<Link to="/">
<img
src={github_logo}
alt="github"
className="h-6 sm:h-7 border border-gray-400 p-1 rounded-full box-border"
/>
</Link>
<Link to="/">
<img
src={facebook_logo}
alt="facebook"
className="h-6 sm:h-7 border border-gray-400 p-1 rounded-full box-border"
/>
</Link>
<Link to="/">
<img
src={twitter_logo}
alt="twitter"
className="h-6 sm:h-7 border border-gray-400 p-1 rounded-full box-border"
/>
</Link>
<Link to="/">
<img
src={instagram_logo}
alt="instagram"
className="h-6 sm:h-7 border border-gray-400 p-1 rounded-full box-border"
/>
</Link>
</div>
</div>
{/* Copyright */}
<div className='col-span-2'>
<p className='text-gray-500 text-center text-xs md:text-sm'>Kishor © 2025</p>
</div>
</div>
</footer>
)
}
export default Footer;
You can use the css flexbox to achieve what you want. You need to set min-height: 100vh to your container and flex: 1 to your about section. So the about section will grow and occupy the available space and the footer will stick to the bottom.
I've provided the updated code below for the App.js which will solve the issue:
...
<div className="app flex flex-col" style={{minHeight: "100vh"}}>
<Header />
<div style={{flex: 1}}>
<Outlet />
</div>
<Footer />
</div >
...
Please check this working Codesandbox demo.