altezze dinamiche in base al dispositivo

src/App.js

@@ -6,27 +6,30 @@ import VideoList from './VideoList'; // eslint-disable-line no-unused-vars
 import TopBar from './TopBar'; // eslint-disable-line no-unused-vars
 import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
 import VideoInfo from './VideoInfo';
+import {ReactHeight} from 'react-height';
 import './css/App.css';
 
 class App extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			isInfoToggled: false
+			isInfoToggled: false,
+			maxHeight: null,
+			navHeight: null
 		};
 }
 
 	render() {
 		return (
 			<React.Fragment>
-				<Row>
-					<TopBar />
-				</Row>
-				<Row className="upperSection px-2">
-					<Col xs="12" lg={this.state.isInfoToggled ? { span: 6, offset: 1, order: 2 } : { span: 6, offset: 0, order: 2 }} className="align-content-center pt-2 p-1 pr-2">
+				<ReactHeight className="row" onHeightReady={height => this.setState({navHeight:height})}>
+				<TopBar />
+				</ReactHeight>
+					<ReactHeight className="upperSection px-2 row" onHeightReady={height => this.setState({maxHeight:height})}>
+					<Col xs="12" lg={this.state.isInfoToggled ? { span: 6, offset: 1, order: 2 } : { span: 7, offset: 1, order: 2 }} className="align-content-center pt-2 p-1 pr-2">
 						<Route path={["/video/:id", "/*"]} component={VideoPlayer} />
 					</Col>
-					<Col xs="12" lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }} style={{ overflow: "auto" }} className="w-75 h-100 py-2 p-0 p-sm-0">
+					<Col xs="12" lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }} style={{ 'overflow': "auto", 'max-height': this.state.maxHeight }} className="w-75 h-100 py-2 p-0 p-sm-0">
 						<div className='d-flex justify-content-center pt-2'>
 							<Button variant="outline-light"
 								onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
@@ -42,10 +45,9 @@ class App extends React.Component {
 							</div>
 						</Collapse>
 					</Col>
-				</Row>
-				<Row className='downSection'>
+					</ReactHeight>
+				<Row style={{"max-height": 'calc(99vh - '+this.state.maxHeight+'px - '+this.state.navHeight+'px)'}} className='downSection'>
 					<Switch>
-						{/*  */}
 						<Route exact path='/' component={VideoList} />
 						<Route render={() => <div>URL not found</div>} />
 					</Switch>

src/css/App.css

@@ -2,15 +2,7 @@
   background-color:#000000;
 }
 
-@media (min-width: 992px) { 
-  .upperSection{
-    background-color:#000000;
-    height: 55vh;
-  }
-}
-
 .downSection{
   overflow: auto !important;
-  height: 40vh;
   margin-top: 1vh;
 }