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?

i'm curious about the choice of not using JS inside CSS, since VH is not supported by older browsers. How has it been so far? — Someone Special
– Someone Special, Commented Mar 29, 2018 at 7:25

Zahnstochermann · Accepted Answer · 2017-09-22 10:08:34Z

5

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

answered Sep 22, 2017 at 10:08

Zahnstochermann

1017 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Full height columns with bootstrap reactstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related