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

Это мой Home.js (компонент домашней страницы)

import React from 'react'; import './Home.css'; export default function Home() { return ( {amp}lt;html{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="home"{amp}gt; {amp}lt;h1{amp}gt;Home Page{amp}lt;/h1{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; ) } 

Это мой навбар

 import React from 'react'; export default function Navbar() { return ( {amp}lt;div{amp}gt; {amp}lt;nav class="navbar navbar-expand-sm bg-dark navbar-dark py-0"{amp}gt; {amp}lt;a class="navbar-brand" href="/"{amp}gt;Planet Code{amp}lt;/a{amp}gt; {amp}lt;ul class="navbar-nav"{amp}gt; {amp}lt;li class="nav-item"{amp}gt; {amp}lt;a class="nav-link" href="/about"{amp}gt;About{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="nav-item"{amp}gt; {amp}lt;a class="nav-link" href="#"{amp}gt;Link 2{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/nav{amp}gt; {amp}lt;/div{amp}gt; ) } 

Это мой App.js

 import React from 'react'; import Navbar from './components/Navbar'; import About from './components/About'; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; import Home from './components/Home'; function App() { return ( {amp}lt;{amp}gt; {amp}lt;Navbar /{amp}gt; {amp}lt;Router{amp}gt; {amp}lt;div{amp}gt; {/* A {amp}lt;Switch{amp}gt; looks through its children {amp}lt;Route{amp}gt;s and renders the first one that matches the current URL. */} {amp}lt;Switch{amp}gt; {amp}lt;Route path="/about"{amp}gt; {amp}lt;About /{amp}gt; {amp}lt;/Route{amp}gt; {amp}lt;Route path="/"{amp}gt; {amp}lt;Home /{amp}gt; {amp}lt;/Route{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/Router{amp}gt; {amp}lt;/{amp}gt; ) } export default App; 

Это скриншот сайта введите описание изображения здесь

Один из способов расширить домашнюю часть страницы — использовать минимальную высоту 100vh и вычесть высоту панели навигации с помощью CSS calc ()

 .home {min-height: calc(100vh - 80px);} 

… где 80px — высота вашей панели навигации.

Вы также можете использовать Flex и flex-grow: 1 согласно этому решению .

Кроме того, ваш HTML не является семантическим, как вы его настроили, так как ваш HTML-код Navbar находится вне тега {amp}lt;html{amp}gt; компонента Home.

Я бы переместил теги {amp}lt;html{amp}gt;{amp}lt;body{amp}gt;{amp}lt;/body{amp}gt;{amp}lt;/html{amp}gt; в ваш компонент приложения, чтобы Nav и Home правильно размещались в html приложения.