是否可以将 'px' 和 'vh' 组合成反应js中1个组件的高度

Question

我有一些组件，其中一些组件的大小为 px。其他我想要可变大小。但是，由于具有固定 px 高度的组件，可变大小的组件并不是页面的固定百分比。所以我希望一个组件大约是屏幕高度的 80%（'80vh'）减去另一个组件的高度。我希望使用类似

的东西

style={{height:'80vh-40px'}}

但这不起作用。

我发现 this page 接近了，但我的程序无法识别该 calc 函数。我是否需要从某个图书馆获取它？

关于如何使这项工作有任何想法吗？

谢谢！

Answer 1

我在 React.js 组件中使用这样的语法：

<div height='calc(100vh - 400px)'></div>

对我有用。在 css 个文件中，我使用相同的语法，但不等于：

.right_col {
  height: calc(~"100vh - 400px");
}

在我的实验中，我发现符号“~”在 React.js 组件中不起作用。

Answer 2

注意 - 您可以获得 window.innerHeight（请参阅 javascript 中的 http://ryanve.com/lab/dimensions/ 了解高度和宽度选项），然后自己在 React 中计算并设置宽度或高度（以像素为单位） .

如果您对高度执行此操作，则需要在高度发生变化时重新计算

state = {
  windowHeight: window.innerHeight
}

componentWillMount () {
  window.addEventListener('resize', this.handleResize)
}

componentWillUnmount () {
  window.removeEventListener('resize', this.handleResize)
}

handleResize = () => {
  this.setState({ windowHeight: window.innerHeight })
}

在你的 div

<div style={{height: this.state.windowHeight}} > ... </div>

你不会想在任何地方都这样做，但在某些情况下它非常方便。例如 - 在 Android 移动网络上设置 100% 高度，其中 100vh 不起作用并且设备按钮会覆盖部分屏幕。

Answer 3

一种解决方法是在您的组件中使用 style={}。

const styles = {targetDiv: { height: 'calc(100vh - Xpx)'}}

然后...

<div style={styles.targetDiv}>
  ...
</div>

是否可以将 'px' 和 'vh' 组合成反应js中1个组件的高度

Is it possible to combine 'px' and 'vh' into the height of 1 component in react js

reactjs

react-jsx