反応jsの1コンポーネントの高さに 'px'と 'vh'を組み合わせることは可能ですか

Question

私はいくつかのコンポーネントを持っていて、それらのいくつかはpxでサイズが決められています。他の人は可変サイズにしたい。しかし、可変サイズのものは固定されたpxの高さを持つコンポーネントのため、ページの一定のパーセンテージではありません。だから私は、コンポーネントが画面の高さの80％（ '80vh'）から他のコンポーネントの高さを差し引いたものにしたい。

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

のようなものを使用したいと思っていましたが、動作しません。

私はthis pageが見つかりましたが、私のプログラムはそのcalc関数を認識しません。多分私はそれをいくつかの図書館から要求する必要がありますか？

この作品を作成する方法についてのご意見はありますか？

ありがとうございます！

Answer 1

私は私のReact.jsコンポーネントで、このような構文を使用します。

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

それは私のために動作します。私の実験では

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

私はそのシンボルは「〜」React.jsコンポーネントでは機能しませんが見つかりました：私は同じ構文を使用しますが、等しくないCSSファイルで 。

Answer 2

注 - window.innerHeight（javascriptのheightとwidthオプションについてはhttp://ryanve.com/lab/dimensions/を参照）を取得し、反応でこれを計算し、幅または高さをピクセル単位で設定できます。

あなたは高さでこれを行う場合、あなたはそれはあなたはどこにでもこれを行うにはしたくないでしょう

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

あなたのdivに

state = { 
    windowHeight: window.innerHeight 
} 

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

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

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

を変更した場合に再計算する必要があると思いますが、それは非常にですいくつかの状況に便利です。たとえば、Androidモバイルウェブで100％の高さを設定します.100Vhは動作せず、デバイスのボタンは画面の一部を覆います。

Answer 3

あなたのコンポーネントにstyle = {}を使用して解決する方法があります。

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

そして...

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