Html 反应元件高度_Html_Css_Reactjs_React Component

Html 反应元件高度

html css reactjs

Html 反应元件高度,html,css,reactjs,react-component,Html,Css,Reactjs,React Component,我已经创建了一个react组件作为我的react应用程序的主页。我正在使用react路由器浏览我网站上的组件。我能够在导航栏下显示主页组件，但是我遇到的问题是，主页组件没有占据页面的整个剩余部分。我希望该组件占用除导航栏以外的页面的其余部分这是我的Home.js主页组件 import React from 'react'; import './Home.css'; export default function Home() { return ( <html&g

我已经创建了一个react组件作为我的react应用程序的主页。我正在使用react路由器浏览我网站上的组件。我能够在导航栏下显示主页组件，但是我遇到的问题是，主页组件没有占据页面的整个剩余部分。我希望该组件占用除导航栏以外的页面的其余部分

这是我的Home.js主页组件

import React from 'react';
import './Home.css';

export default function Home() {
    return (
        <html>
            <body>
                <div class="home">
                    <h1>Home Page</h1>
                </div>
            </body>
        </html>
    )
}

这是我的导航栏

import React from 'react';

export default function Navbar() {
    return (
        <div>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark py-0">

  <a class="navbar-brand" href="/">Planet Code</a>


  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="/about">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>

  </ul>
</nav>

        </div>
    )
}

这是我的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 (
    <>
    <Navbar />
      <Router>
      <div>
        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  </>
  )
}

export default App;

这是该网站的截图

扩展页面主页部分的一种方法是使用最小高度100vh，然后使用

。。。其中80px是导航栏的高度

您还可以使用Flex和Flex grow:1

另一方面，您的HTML并不像您设置的那样具有语义，因为您的Navbar HTML在主组件标记之外

我会搬家的标记到应用程序组件中，允许Nav和Home正确地位于应用程序的html中

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