0

I am trying to learn Reactjs and use it together with react-bootstrap. Right now I have a very simple template with two columns. What I need is these columns to resize according to the window-size.

I have managed to do that by adding in the CSS: window.innerHeight as:

const styles = {
  container: {

  },
  right: {
    height: window.innerHeight,
    padding: 0,
    margin: 0,
    overflow: 'hidden',
    backgroundColor: 'yellow'
  },
  left: {
    overflowY: '100%',
    padding: 0,
    height: window.innerHeight,
    paddingBottom: '50px',
    backgroundColor: 'white'
  },
  row: {
    marginBottom: 0
  }
}

This do what I want as shown: enter image description here

But I don't like it as I actually put javascript inside my CSS. I would prefer to avoid this. Do you have any recommendations?

user1919
  • 3,818
  • 17
  • 62
  • 97
  • Possible duplicate of [Twitter bootstrap 3 two columns full height](https://stackoverflow.com/questions/19089384/twitter-bootstrap-3-two-columns-full-height) – bennygenel Sep 22 '17 at 07:23
  • @bennygenel we are talking about REACT! – user1919 Sep 22 '17 at 07:26
  • No, you're using javascript to create styling for your component - that's ok - or you can use `vh` if you don't want to measure the viewport – StudioTime Sep 22 '17 at 07:28
  • No. I don't think so. You are asking a solution without javascript for a CSS problem. Thats pretty much a bootstrap problem. – bennygenel Sep 22 '17 at 07:28
  • True. But I am asking a solution based on the react-bootstrap library which is using specific tags and elements not always compatible with the ones existing in boostrap (syntax etc.) – user1919 Sep 22 '17 at 09:29

0 Answers0