Search code examples
htmlcssreactjsreact-component

React Component Height

I have created a react component to be the home page on my react app. I am using react router to navigate through the components on my site. I am able to display the home page component under my nav bar, however the problem that I am having is that the home page component is not taking up the whole rest of the page. I want the component to take up the rest of the page other than the navbar.

This is my Home.js (home page component)

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

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

This is my navbar 

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>
    )
}

This is my 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;

This is a screenshot of the site enter image description here

Solution

  • One way to expand the home portion of the page is to use a min-height of 100vh and subtract the height of the navbar using CSS calc() ...

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

    ... where 80px is the height of your navbar.

    You could also use Flex, and flex-grow: 1 as per this solution.

    As an aside, your HTML isn't semantic the way you've set it up, as your Navbar HTML is outside of the Home component <html> tag.

    I'd move the <html><body></body></html> tags into your App component, allowing Nav and Home to sit correctly in the html of the app.