I want to About and Footer should have gap.My important Requirements are :
- if About size is less then show footer at bottom of page.
- if About size is large and page became scrollable then, Footer should come below the About, wherever 'About' will be end.My Footer is not getting stuck at bottom of page(document), it comes just below the About content.I have tried a lot but there is no change in footer.
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;