React-bootstrap 行填充所有可用空间

Question

我需要将行拉伸到页脚的开头。Bootstrap 有 class h-100，但它在我的情况下不起作用，我不知道为什么。
我是前端新手，但互联网上的所有示例都没有帮助我（

<div className="App">
  <header>
    <h1>App</h1>
  </header>
  <main>
    <Container fluid>
      <Row className="h-100">
        <Col xs={2} className="ml-0 bg-secondary">
          <Sidebar />
        </Col>
        <Col className="p-1 p-md-4">
          <AnotherComponent />
        </Col>
      </Row>
    </Container>
  </main>
  <footer>
    <p>
      Footer text
    </p>
  </footer>
</div>

结果：

更新：将vh-100类添加到容器 后

更新：使位置相对主屏幕： 滚动后：

Answer 1

尝试直接为容器提供完整视图高度

 <Container className="vh-100 d-flex flex-column "> 
       <Row className="h-100">
  ......