Volle Höhe Spalten mit bootstrap reactstrap

Question

Ich benutze reagieren und reactstrap, um einige Vorlage zu erstellen. Dies ist, wie mein Code jetzt aussieht:

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; 

Im Moment ist voller Höhe (autoresizable Spalten) erhalten, aber ich diese Schnipsel von JS in meinem CS:

height: window.innerHeight, 

Ich ziehe es nicht innen mit JS CSS, aber ich bin mir nicht sicher, wie man das in der retstrap-Bibliothek macht.

Irgendwelche Ideen?

Answer 1

Vielleicht können Sie die CSS-Darstellungseinheit 'vh' verwenden:

height: 100vh 

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

Prüfung für Browser-Unterstützung, obwohl sie möglicherweise nicht ältere iOS-Geräte arbeiten auf: https://caniuse.com/#search=vh