реакция- bootstrap строка заполняет все доступное пространство

Question

Мне нужно растянуть строку до начала нижнего колонтитула. Bootstrap имеет класс h-100, но он не работает в моем случае, и я не знаю, почему.
Я новичок во внешнем интерфейсе, но я все примеры на inte rnet не помогли Я (

<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 в Контейнер

Upd: установить положение относительно Главный экран: После прокрутки:

Answer 1

Попробуйте задать полную высоту просмотра для вашего контейнера напрямую

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

Answer 2

class h-100 будет принимать родительскую высоту, поэтому здесь Row будет принимать высоту контейнера, которая является высотой строки, необходимой для отображения его дочерних элементов. что вам нужно сделать, это рассчитать высоту оставшегося пространства:

container Height = (fullpage height) -(footer height + header height)

код с реагировать здесь

  componentDidMount(){
    const header = document.querySelector("header").offsetHeight  
    const footer = document.querySelector("footer").offsetHeight
     document.querySelector(".my-container").style.height =`${window.innerHeight-(header+footer)}px`
  }

это основной код, размещенный componentDidMount или useEffect если вы используете функциональный компонент