Я не могу установить высоту 100 % для компонентов розетки в макете. ⇐ CSS

[Anonymous]

Я разрабатываю приложение с использованием React, React-router, Material UI и Redux-Toolkit. У меня возникли проблемы с стилизацией высоты отображаемых компонентов. Уточняю, что я новичок в CSS и во многом другом материале, но я исследовал и до сих пор не нашел решения. Это мой роутер:

Код: Выделить всё

import React from 'react'
import ReactDOM from 'react-dom/client'
// import App from './App.jsx'
import './index.css'
import {
createBrowserRouter,
RouterProvider,
} from "react-router-dom"
import Root from './routes/root';
import ErrorPage from './errorPage';
import Applications from './routes/applications';
import Stats from './routes/stats';
import Sign from './routes/signContainer';
import SignInForm from './components/signInForm';
import SignUpForm from './components/signUpForm';
import { Provider } from 'react-redux'
import { store } from './redux/store'
import LandingPage from './routes/landingPage';
import PublicationsContainer from './routes/publicationsContainer';

const router = createBrowserRouter([
{
path: "/",
element: ,
errorElement:,
},
{
path:"/signup",
element:
},
{
path:'/signin',
element:
},
{
path:"/home",
element:,
children:[
{
path: "postulaciones",
element: ,
},
{
path: "publicaciones",
element: 
,
},
{
path: "estadisticas",
element: ,
}
]
}
]);

ReactDOM.createRoot(document.getElementById('root')).render(




,
)

это мой макет:

Код: Выделить всё

import { Outlet, useNavigate } from "react-router-dom";
import { Box, CssBaseline } from "@mui/material";
import Footer from "../components/footer";
import NavBar from "../components/navBar";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getUserInfo } from "../redux/actions/userActions";

export default function Root() {
const dispatch = useDispatch()
const navigate = useNavigate()
const { userInfo } = useSelector((state) => state.user)
const getinfo = async (id)=> {
await dispatch(getUserInfo(id)).unwrap()
}
useEffect(() => {
if (!userInfo) {
const userId = localStorage.getItem('userId')
getinfo(userId)
}
if (window.location.pathname === '/home') {
navigate("/home/postulaciones");
}
}, [navigate]);

return (








);
}

Я хочу добиться того, чтобы компоненты, отображаемые с помощью, имели высоту 100 % между навигационной панелью и нижним колонтитулом.
Я поместил bgcolor в красный цвет, чтобы иметь возможность оцените высоту компонента, которая в данном случае занимает 100% между навигационной панелью и нижним колонтитулом, но проблема в компонентах выхода. Оставляю пример компонента, который визуализирует розетку:

Код: Выделить всё

import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getUserApplications } from "../redux/actions/applicationsActions";
import {
Container,
Typography,
CircularProgress,
Box,
Button,
Grid,
} from "@mui/material";
import { Add as AddIcon } from "@mui/icons-material";
import ApplicationItem from "../components/applicationItem";
import Filters from "../components/filter";
import PaginationComp from "../components/paginationComp";

export default function Applications() {
const dispatch = useDispatch();
const id = localStorage.getItem('userId')
const { error, loading, userApplications } = useSelector(
(state) => state.applications
);
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 8;

useEffect(() => {
if (!userApplications) {
dispatch(getUserApplications(id));
}
}, []);

const handlePageChange = (page) => {
setCurrentPage(page);
};

const startIndex = (currentPage - 1) * itemsPerPage;
const visibleApplications = userApplications?.slice(startIndex, startIndex + itemsPerPage);

return (






Mis Postulaciones





Agregar






{loading && }

{error && (

{error.message}

)}
{visibleApplications &&
visibleApplications.map((application) => (

))}
{visibleApplications &&
totalItems={userApplications?.length || 0}
itemsPerPage={itemsPerPage}
currentPage={currentPage}
onPageChange={handlePageChange}
/>
}
{
!userApplications?.length &&


Todavia no tienes postulaciones


}




);
}

В этом компоненте, который будет одним из тех, что отображает розетку, я добавил синий фон, чтобы можно было видеть высоту компонента, проблема в том, что, хотя я установил высоту до 100%, она не занимает все пространство между футером и панелью навигации. Я все еще вижу красный цвет компонента box в Root.jsx. В чем может быть проблема?
Попробуйте установить высоту 100% компонента application.jsx, как вы понимаете, родительского компонента, а это будет:

Код: Выделить всё

Он занимает всю высоту между нижним колонтитулом и панелью навигации, но я не могу добиться того, чего ожидал, а именно того, что компонент, который отображает вывод минимальной высоты, должен быть высотой между панелью навигации и нижним колонтитулом.
Кроме того, если у вас есть какие-либо отзывы, я буду рад их получить.

Подробнее здесь: https://stackoverflow.com/questions/784 ... -my-layout