2017-10-16 44 views
0

私はReactアプリケーションでFlexboxを使用して、全幅と高さを占める単純な2列のウェブページを作成しようとしています。CSS 100%の高さがリアクションアプリケーションでは機能しません

私はこれをHTMLとCSSで動作させることができますが、Reactアプリケーションでは動作しません。

これまでのところ、私が持っている:

:root { 
    overflow-x: hidden; 
    height: 100%; 
} 

body { 
    min-height: 100% 
} 

.flexbox { 
    height: 100%; 
    display: flex; 
} 

.left { 
    flex: 0 0 200px; 
    height: 100% 
} 

.right { 
    flex: 1 
} 

と:

<div class="flexbox"> 
    <div class="left"> 
    Left 
    </div> 
    <div class="right"> 
    Right 
    </div> 
</div> 

を私はindex.htmlに追加<div id="root"></div>タグを説明するために必要なことを実現ので、私は私のCSSに以下をも追加されました:

#root { 
    height: 100%; 
} 

そして、私のrender機能:

render() { 
    return (
    <div className="flexbox"> 
     <div className="left">Left</div> 
     <div className="right">Right</div> 
    </div> 
) 
} 

これは機能しません。列は存在しますが、完全な高さではありません。何故なの?

+0

私は愚かに聞こえるなら、私を許していますが、cssファイルの権利をインポートしていますか? – Dane

+0

はい私は 'レフト'と '右'は実際に背景色を持っていて、彼らは見せています。 – tommyd456

+0

このリンクを参照することができます: - https:// stackoverflow。com/questions/6654958/make-body--html-100-of-the-browser-height –

答えて

2

Bodyは、ダイナミックプロパティをどのようにスケーリングするかについて親(HTML)を調べます。そのため、HTMLエレメントの高さを設定する必要があります。

しかし、本文の内容はおそらく動的に変更する必要があります。 min-heightを100%に設定すると、この目標が達成されます。 CSSの

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    height: 100%; 
 
}

+0

'html'は高さを持っています - ':root'を参照してください – tommyd456

+0

これを覚えておいてくださいReact(HTMLとCSS)の外で動作します – tommyd456

+0

私の最新の編集をチェックしてください。最小高さ: - >高さ。それは私にとってはうまくいく。 –

1

使用ビューポートの高さ単位:

#root { 
    min-height: 100vh; 
} 
+0

Reactアプリケーションでコードが機能しない理由を本当に理解したいですか? – tommyd456

+0

本当にありませんか?それはうまくいくはずです。代わりにあなたの 'flexbox'クラスに' min-height:100vh; 'を設定しようとすることができます。それは私のために働く、多分何かあなたのCSSを上書きしますか? – zdolny

+0

@ tommyd456動作例:https://jsfiddle.net/2q73angs/ – zdolny

0

これを試してみてください。

[data-reactroot] 
 
     {height: 100% !important; }

0

あなたが100%であるためにあなたのルートhtmlタグの高さを設定する必要があります。

html { 
    height: 100%; 
} 

別の技術がviewport unitsを使用して、直接、高さを設定することです:

targetelement { 
    height: 100vh; 
} 

私はあなたが興味があるかもしれない疑い後者では、フレックスボックスに対するあなたの傾向が与えられています。私は個人的に、依存パーセンテージで要素を重ねるよりもはるかに簡単です。

+0

':root'は' html'と同じです – tommyd456

0

あなたも忘れてしまいました<html>もタグです。さらに、それはすべての親の親です!だからあなたは100%の高さを与えるべきです。

html, body { height: 100%; }

+0

':root'は' html'と同じです – tommyd456

関連する問題