Full height columns with bootstrap reactstrap

Question

I am using react and reactstrap to create some template. This is how my code looks right now:

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 (
     <Container fluid>
      <Row>
       <Col xs="12" sm="4" md="4" lg="3" style={ styles.left }>
           Some text
       </Col>
       <Col xs="12" sm="8" md="8" lg="9" style={ styles.right }>
           Some text
       </Col>
      </Row>
     </Container>
   );
 }
}

export default MainArea;

Right now I get full height (autoresizable columns) but I use this snippet of JS inside my CS:

  height: window.innerHeight, 

I prefer not using JS inside CSS but I am not sure how to do this in reactstrap library.

Any ideas?

Answer 1

Maybe you can use the css viewport unit 'vh':

height: 100vh

https://www.w3schools.com/cssref/css_units.asp

check for browser support though, they might not work on older iOS devices: https://caniuse.com/#search=vh