CSS -Ausgabe in React ⇐ CSS

[Anonymous]

Ich möchte ungefähr und die Fußzeile sollte eine Lücke haben. von Seite. < /li>
Wenn etwa Größe groß ist und die Seite scrollbar wurde, sollte Fußzeile unter die ungefähr sein, wo immer 'um' endet.
Meine Fußzeile bleibt nicht stecken Am Ende von Seite (Dokument) kommt es gerade Unter dem Über Inhalt.
Ich habe viel versucht, aber es gibt keine Änderung in der Fußzeile.

Code: Select all

App.js

Code: Select all

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

Code: Select all

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

Code: Select all

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;