gpt4 book ai didi

twitter-bootstrap - 带 Bootstrap react 的全高列

转载 作者:行者123 更新时间:2023-12-04 02:02:19 25 4
gpt4 key购买 nike

我正在使用 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:

  height: window.innerHeight, 

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

有什么想法吗?

最佳答案

也许你可以使用 css viewport unit 'vh':

height: 100vh

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

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

关于twitter-bootstrap - 带 Bootstrap react 的全高列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46361880/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com