Проблема CSS в React ⇐ CSS

[Anonymous]

Я хочу, и нижний колонтитул должен иметь разрыв.
Мои важные требования: < /p>

Если по размеру меньше, то покажите нижний колонтитул внизу страницы. Внизу страницы (документ) это приходит Чуть ниже контента.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 Oops! No Internet. Try again.

} else {

return (












);
}
};

const appRouter = createBrowserRouter([
{
path: "/",
element: ,
errorElement: ,
children: [
{
path: "/",
element: ,
},
{
path: "/about",
element:
},
{
path: "/contact",
element:
},
{
path: "/restaurants/:resId",
element:
},
{
path: "/cart",
element:
},
]
}
]);

const root = ReactDOM.createRoot(document.getElementById("rootApp"));
root.render();
< /code>
About.js
const About = () => {
return (

`// Note this line`
About Us

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.

)
}

export default About;
< /code>
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 (

`// Note this line`


Company

About Us


Careers


Team


Contact Us

Help & Support


Partner with us


Legal

Terms & Conditions


Privacy Policy


Follow us on


[img]{github_logo}
className="h-6 sm:h-7 border border-gray-400 p-1 rounded-full box-border"
/>


[img]{facebook_logo}
className="h-6 sm:h-7 border border-gray-400 p-1 rounded-full box-border"
/>


[img]{twitter_logo}
className="h-6 sm:h-7 border border-gray-400 p-1 rounded-full box-border"
/>


[img]{instagram_logo}
className="h-6 sm:h-7 border border-gray-400 p-1 rounded-full box-border"
/>



{/* Copyright */}

Kishor © 2025



)
}
export default Footer;


Подробнее здесь: https://stackoverflow.com/questions/794 ... e-in-react