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

Question

I have a few components and some of them are sized with px. The others I want to be variable size. However, the ones that are variable size are not a constant percentage of the page because of the components with a fixed px height. So I want a component to be about 80% of the screen height('80vh') minus the height of the other component. I was hoping to use something like

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

but that does not work.

I found this page which gets close but that my program does not recognize that calc function. Do I need to require it from some library maybe?

Any ideas on how to make this work?

Thanks!

calc() works in css. So i would build a class that does the calc() and apply that class to your component via className="yourCalcClass" — Justin Herter, Jul 06 '16 at 22:37
That seems like a great solution. I must admit that I do not know how to create a css class in a react component. I will do some research and figure out how that is done. thanks! — James Hollyer, Jul 06 '16 at 22:45
its just regular css class in a css file and you apply the class with className= instead of class= — Justin Herter, Jul 06 '16 at 23:19
and include that class as a style sheet in your .html file? that is what I am doing right now and it is not working for me. I created a .css file and put this in it: calcHeightClass { height: calc(~'85vh - 75px'); margin-top:'1vh'; overflow-y:'scroll'; } then my componenet looks like this ....no luck. It is not styling it at all — James Hollyer, Jul 06 '16 at 23:46

Den · Accepted Answer · 2022-11-18T08:23:11.663

9

I use syntax like this in my React.js components:

<div style={{height: 'calc(100vh - 400px)'}}></div>

it works for me.

Inside CSS code with LESS preprocessor I use the same syntax, but not equal:

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

In my experiments, I found that symbol "~" doesn't work in React.js components.

edited Nov 18 '22 at 08:23

answered Sep 14 '16 at 03:48

Den

1,424
16
18

`height` prop doesn't exist and doesn't work – TomSawyer Aug 31 '22 at 10:20
@TomSawyer, you are right. It was just an example. But I've changed it to the real syntax with `style` attribute to avoid misconception. Thanks. – Den Nov 18 '22 at 08:12

score 3 · Answer 2 · answered Mar 02 '18 at 03:27

3

A way to solve it is by using style={} in your component.

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

then...

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

answered Mar 02 '18 at 03:27

juan mejia

31
2

score 1 · Answer 3 · answered Dec 06 '17 at 23:25

Note - you can get the window.innerHeight (see http://ryanve.com/lab/dimensions/ for height and width options in javascript) and just calculate this yourself in react and set the width or height in pixels.

If you do this with height, you'd need to recalculate if it changes

state = {
  windowHeight: window.innerHeight
}

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

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

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

in your div

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

You wouldn't want to do this everywhere, but it's very handy for some situations. For example - setting 100% height on Android mobile web, where 100vh does not work and device buttons cover up part of the screen.

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

3 Answers3