title: How to programmatically set the height of a BootstrapTable element?
body: <p>I need to programmatically set the height of a <code>BootstrapTable</code> element (because I want to ensure that the table takes the available space up to the bottom of the browser window). I tried to set the CSS property <code>height</code> of the div with the CSS class <code>react-bs-table</code> (that's where the height would go if I set it in the <code>height</code> attribute of the <code>BootstrapTable</code> element). Looks like this:</p>
  
  <pre><code>componentDidMount() {
     // Calculate the height
     let height = 200; // Only simluated here!
  
     // Set the height
     const tableElement = document.getElementsByClassName('react-bs-table')[0];
     tableElement.style.height = height + 'px';
  }
  </code></pre>
  
  <p>Problem with this approach is that the data rows of the <code>BootstrapTable</code> overflow it's bottom border. Seems like the height of this overflow is the height of the header.</p>
  
  <p><a href="https://jsfiddle.net/freeboarder42/ots4Lawj/3/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p>How can I set the height of a <code>BootstrapTable</code> correctly (without the data rows overflowing the element)?</p>