title: Full height columns with bootstrap reactstrap
body: <p>I am using react and reactstrap to create some template. This is how my code looks right now:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Container, Row, Col } from 'reactstrap';
  
  const styles = {
    container: {
  
    },
    right: {
      height: window.innerHeight, // I want to change this
      padding: 0,
      margin: 0,
      overflow: 'hidden',
      backgroundColor: 'yellow'
    },
    left: {
      overflowY: '100%',
      padding: 0,
      height: window.innerHeight,
      paddingBottom: '50px',
      backgroundColor: 'white'
    },
    row: {
      marginBottom: 0
    }
  }
  
  class MainArea extends Component {
    constructor(){
     super();
    }
    render() {
     return (
       &lt;Container fluid&gt;
        &lt;Row&gt;
         &lt;Col xs="12" sm="4" md="4" lg="3" style={ styles.left }&gt;
             Some text
         &lt;/Col&gt;
         &lt;Col xs="12" sm="8" md="8" lg="9" style={ styles.right }&gt;
             Some text
         &lt;/Col&gt;
        &lt;/Row&gt;
       &lt;/Container&gt;
     );
   }
  }
  
  export default MainArea;
  </code></pre>
  
  <p>Right now I get full height (autoresizable columns) but I use this snippet of JS inside my CS:</p>
  
  <pre><code>  height: window.innerHeight, 
  </code></pre>
  
  <p>I prefer not using JS inside CSS but I am not sure how to do this in reactstrap library.</p>
  
  <p>Any ideas?</p>