web-dev-qa-db-ja.com

React-コンポーネントのフルスクリーン（高さ100％）

画面の高さの100％を占める「home」という名前のReactコンポーネントの表示にこだわっています。 CSSまたはReactインラインスタイルを使用しても、機能しません。

以下の例では、html、bodyおよび＃appはCSSでheight：100％に設定されます。 For。homeインラインスタイルを使用しました（ただし、CSSまたはインラインスタイルを使用したものはすべて同じです）： enter image description here この問題は、高さが100％に設定されていない<div data-reactroot data-reactid='1'>に起因するようです。

Chrome開発者ツールを使用してハッキングした場合、動作します： enter image description here

それで、Reactに完全な高さのコンポーネントを表示する適切な方法は何ですか？

どんな助けも歓迎です:)

cssreactjshtml5
38
Thibault Clement
html, body, #app, #app>div {
  height: 100%
}

これにより、すべてのチェーンがheight: 100%になります。

30
bora89

何日も悩まされます。そして最後に、CSSプロパティセレクターを使用して解決します。

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

次のこともできます。

body > #root > div {
  height: 100vh;
}
17
Daniel Kim

<div style = {{height:"100vh"}}> </div>を試してください

7
Suicide Bunny

これは理想的な答えではないかもしれませんが、これを試してください：

style={{top:'0', bottom:'0', left:'0', right:'0', position: 'absolute'}}

それはあなたが望むものではありませんが、あなたにやや同じ効果を与える境界に添付されたサイズを保持します。

6
Aman Parmar
body{
 height:100%
}

#app div{
height:100%
}

これは私のために働く。

2
user3785155

サイドナビゲーションパネルの高さを100％に表示するのと同じ問題がありました。

それを修正する手順は次のとおりです。

Index.cssファイル内------

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

SidePanel.css（これは私に問題を与えていました）：

.side-panel {
height: 100%;
position: fixed; <--- this is what made the difference and scaled to 100% correctly
}

他の属性は明確にするために削除されましたが、問題はネストされたコンテナーの高さを100％にスケーリングすることにあると思います。親クラスの高さは100％を適用する必要があります。 -私が興味を持っているのは、固定された理由です。位置はスケールを修正し、スケールなしで失敗します。これは、最終的にはもう少し練習して学習するものです。

私は今、1週間反応して作業しており、Web開発の初心者ですが、発見した修正を100％にスケーリングすることで共有したかったのです。これが、あなたや同様の問題を抱えている人に役立つことを願っています。幸運を！

2
Dennis LLopis

App.cssのCSSクラスでこれを管理しました

.fill-window {
    height: 100%;
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
}

Render（）メソッドでルート要素に適用します

render() {
   return ( <div className="fill-window">{content}</div> );
}

またはインライン

render() {
   return (
      <div style={{ height: '100%', position: 'absolute', left: '0px', width: '100%', overflow: 'hidden'}}>
          {content}
      </div>
   );
}
1
maeneak

CRNA iを使用するプロジェクトの場合、index.cssでこれを使用します

html, body, #root {
  height: 100%;
}

そして、私のApp.cssでこれを使用します

.App {
  height: 100%;
}

また、アプリ内のdivの高さを100％に設定します（例：

.MainGridContainer {
  display: grid;
  width: 100%;
  height:100%;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 50px auto;
}
0
Dave Pile

ここではReactを使用していますが、要素のレイアウトは完全にhtml/css機能です。

この問題の根本的な原因は、cssのheightプロパティの動作にあります。高さの相対値（％）を使用している場合-これは、親に対して高さが設定されることを意味します。

したがって、html > body > div#root > div.appのような構造がある場合-div.appを100％の高さにするにはそのすべての祖先は100％の高さにする必要があります。次の例で遊ぶことができます：

html {
  height: 100%;
}

body {
  height: 100%;
}

div#root {
  height: 100%; /* remove this line to see div.app is no more 100% height */
  background-color: Indigo;
  padding: 0 30px;
}

div.app {
  height: 100%;
  background-color: cornsilk;
}
<div id="root">
  <div class="app"> I will be 100% height if my parents are </div>
</div>

いくつかの引数：

  • !importantの使用法-しばらくの間、この機能は〜95％のケースで有用ですが、html/cssの構造が不十分であることを示しています。また、これは現在の問題の解決策ではありません。
  • position: absoluteではありません。プロパティpositonは、要素のレンダリング方法を変更するように設計されています（自身の位置-相対、ビューポート-固定、最も近い親の位置が静的ではない-絶対）。 position: absolute; top: 0; right: 0; bottom: 0; left: 0;にもかかわらず、Ansは同じ外観になります-また、親positionをstatic以外のものに変更するように促します。したがって、2つの要素を維持する必要があります。また、親divが1行（高さ0）で折りたたまれ、内部-フルスクリーンになります。そのため、要素インスペクターが混乱します。
0
Shevchenko Viktor

高さで！importantを使用してみてください。これはおそらく、HTMLボディに影響する他のスタイルが原因です。

{ height : 100% !important; }

また、VPで値を指定して、likeheight : 700vp;に言及したvieeポートピクセルに高さを設定できますが、これは移植性がありません。

0
NishanthSpShetty

index.htmlヘッドにこれを追加するとうまくいきました：

<style>
    html, body, #app, #app>div { position: absolute; width: 100% !important; height: 100% !important; }
</style>
0
var foobar