title: react-bootstrap row fill all available space
body: <p>I need stretch row to the start of footer. Bootstrap has class <code>h-100</code>, but it doesn't work in my case and I don't know why.<br>
  I'm new in frontend, but I all examples on the internet didn't help me(</p>
  
  <pre><code>&lt;div className="App"&gt;
    &lt;header&gt;
      &lt;h1&gt;App&lt;/h1&gt;
    &lt;/header&gt;
    &lt;main&gt;
      &lt;Container fluid&gt;
        &lt;Row className="h-100"&gt;
          &lt;Col xs={2} className="ml-0 bg-secondary"&gt;
            &lt;Sidebar /&gt;
          &lt;/Col&gt;
          &lt;Col className="p-1 p-md-4"&gt;
            &lt;AnotherComponent /&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/Container&gt;
    &lt;/main&gt;
    &lt;footer&gt;
      &lt;p&gt;
        Footer text
      &lt;/p&gt;
    &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Result: 
  <a href="https://i.stack.imgur.com/cbDZV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cbDZV.png" alt="result"></a></p>
  
  <p>Upd: after adding <code>vh-100</code> class to the Container
  <a href="https://i.stack.imgur.com/EVhO7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EVhO7.png" alt="Upd"></a></p>
  
  <p>Upd: make position relative
  Main screen: 
  <a href="https://i.stack.imgur.com/3VluD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3VluD.png" alt="main"></a>
  After scrolling:
  <a href="https://i.stack.imgur.com/0fhQp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0fhQp.png" alt="scroll"></a></p>