React-bootstrap component not stretching to the bottom of the page

Question

I want the component currently being displayed as well as the links to stretch to the bottom of the page.
(Actually the footer should be at the bottom but the other component stretching and ending just before it.)

I also noticed that if I add ap tag at the bottom of the code, right before the last div in App.js it is placed at the bottom of the page.

I was thinking if this might be because I am using inline styles for each component in App.js. I tried to style each component in the code for that component, but for example the lists(nav) background color did end up not covering the entire list.

Edit : I found out that if I set the style height for the Row displaying the main content to 92.6% which makes it fill the screen entirely.

Currently looks like this

App.js code

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="App">
        <Router>
          <Container>
            {/* header */}
            <Row style={{backgroundColor: "#343a40", color:"white"}}>

              <Col >
                <Header />
                {/* <p>Header</p> */}
              </Col>
            </Row>

            {/* Content */}
            <Row style={{backgroundColor: "gray"}}>
              {/* Nav */}
              <Col style={{backgroundColor: "lightgray"}}>
                <Navigation id="appNav"/>
              </Col>

              {/* Main */}

              <Col xs={9}>
                <Switch>
                  <Route path="/" exact component={Home} />
                </Switch>
                <Switch>
                  <Route path="/about" exact component={About} />
                </Switch>
                <Switch>
                  <Route path="/submit" exact component={Submit} />
                </Switch>
                <Switch>
                  <Route path="/toplist" exact component={Toplist} />
                </Switch>
              </Col>
            </Row>

            {/* Footer */}
            <Row style={{backgroundColor: "lightgray"}}>
              <Col >
                <Footer/>
              </Col>
            </Row>
          </Container>
        </Router>

      </div>
    );
  }
}

Answer 1

try to add position absolute to your footer:

<Row style={{backgroundColor: "lightgray",position: "absolute", bottom: "0px"}}>
     <Col >
       <Footer/>
     </Col>
</Row>