带引导反应的全高柱答案

【问题标题】：Full height columns with bootstrap reactstrap带引导反应的全高柱
【发布时间】：2018-03-03 20:46:36
【问题描述】：

我正在使用 react 和 reactstrap 创建一些模板。这就是我的代码现在的样子：

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;

现在我得到了全高（可自动调整大小的列），但我在我的 CS 中使用了这个 JS 的 sn-p：

  height: window.innerHeight,

我不喜欢在 CSS 中使用 JS，但我不确定如何在 reactstrap 库中执行此操作。

有什么想法吗？

【问题讨论】：

我很好奇在 CSS 中不使用 JS 的选择，因为旧版浏览器不支持 VH。到目前为止怎么样？

标签： twitter-bootstrap reactjs reactstrap

【解决方案1】：

也许您可以使用 css 视口单元“vh”：

height: 100vh

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

但请检查浏览器支持，它们可能无法在较旧的 iOS 设备上运行： https://caniuse.com/#search=vh

【讨论】：