Reagieren - Komponenten-Vollbild (mit einer Höhe von 100%)

Ich kann keine React-Komponente mit dem Namen "home" anzeigen, die 100% der Höhe meines Bildschirms einnimmt. Was auch immer ich CSS oder React Inline-Stil verwende, es funktioniert nicht.

Im folgenden Beispiel sind HTML , Body und #App in CSS auf die Höhe 100% festgelegt. Für .home habe ich den Inline-Stil verwendet (aber was auch immer ich für CSS oder Inline-Stil verwendet habe, ist dasselbe): Das Problem scheint darauf zurückzuführen zu sein, <div data-reactroot data-reactid='1'>dass die Höhe nicht festgelegt ist: 100%.

Wenn ich es mit dem Chrome-Entwicklertool gehackt habe, funktioniert es:

Was ist der richtige Weg, um eine Komponente mit voller Höhe in React anzuzeigen?

Jede Hilfe ist willkommen :)

html, body, #app, #app>div {
  height: 100%
}

Dies stellt sicher, dass die gesamte Kette vorhanden ist height: 100%

Sie könnten auch tun:

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

Es nervt mich tagelang. Und schließlich benutze ich den CSS-Eigenschaftswähler, um es zu lösen.

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

Versuchen <div style = {{height:"100vh"}}> </div>

Ich habe dies mit einer CSS-Klasse in meiner app.css geschafft

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

Wenden Sie es in Ihrer render () -Methode auf Ihr Stammelement an

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

Oder inline

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

Dies ist zwar möglicherweise nicht die ideale Antwort, aber versuchen Sie Folgendes:

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

Die Größe der Ränder bleibt erhalten, was nicht das ist, was Sie wollen, aber Sie erhalten den gleichen Effekt.

#app {
  height: 100%;
  min-height: 100vh;
}

Immer volle Sichthöhe min

body{
  height:100%
}

#app div{
  height:100%
}

das funktioniert bei mir ..

Trotz der Verwendung von React hier ist das Elementlayout vollständig eine HTML / CSS-Funktion.

Die Hauptursache des Problems liegt in der Funktionsweise von heightEigenschaften in CSS. Wenn Sie relative Werte für die Höhe (in%) verwenden, bedeutet dies, dass die Höhe in Bezug auf das übergeordnete Element festgelegt wird.

Wenn Sie also eine Struktur wie html > body > div#root > div.app- haben, um div.app100% Höhe zu erreichen, sollten alle Vorfahren 100% Höhe haben. Sie können mit dem nächsten Beispiel spielen:

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>

Einige Argumente:

• Verwendung von !important- Trotz einiger Zeit ist diese Funktion in ~ 95% der Fälle nützlich. Sie weist auf eine schlechte Struktur von HTML / CSS hin. Dies ist auch keine Lösung für das aktuelle Problem.
• Warum nicht position: absolute. Die Eigenschaft positonsoll ändern, wie das Element in Bezug auf gerendert wird (eigene Position - relativ, Ansichtsfenster - fest, nächstgelegenes übergeordnetes Element, dessen Position nicht statisch - absolut ist). Ans trotz position: absolute; top: 0; right: 0; bottom: 0; left: 0;wird zu dem gleichen Aussehen führen - es drängt Sie auch dazu, die Eltern positionzu etwas nicht zu ändern static- also müssen Sie 2 Elemente pflegen. Dies führt auch dazu, dass das übergeordnete Div in einer Zeile (Höhe 0) und im inneren Vollbildmodus reduziert wird. Das macht Verwirrung im Elementinspektor.

Ich hatte das gleiche Problem bei der Anzeige der Höhe meines seitlichen Navigationsfelds auf 100%.

Meine Schritte, um das Problem zu beheben, waren:

In der Datei index.css ------

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

In der sidePanel.css (dies gab mir Probleme):

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

Andere Attribute wurden aus Gründen der Übersichtlichkeit herausgenommen, aber ich denke, das Problem liegt darin, die Höhe in verschachtelten Containern auf 100% zu skalieren, beispielsweise wie Sie versuchen, die Höhe in Ihren verschachtelten Containern zu skalieren. Die Höhe der übergeordneten Klassen muss auf 100% angewendet werden. - Ich bin neugierig, warum fest: Position korrigiert die Skala und versagt ohne sie; Das werde ich irgendwann mit etwas mehr Übung lernen.

Ich arbeite jetzt seit einer Woche mit "Reagieren" und bin ein Neuling in der Webentwicklung, aber ich wollte einen Fix teilen, den ich mit einer Skalierungshöhe auf 100% entdeckt habe. Ich hoffe, das hilft Ihnen oder jedem, der ein ähnliches Problem hat. Viel Glück!

Für ein Projekt mit CRNA verwende ich dies in index.css

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

und dann in meiner App.css benutze ich dies

.App {
  height: 100%;
}

und setzen Sie die Höhe für ein Div in der App auf 100%, wenn es z.

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

Das im index.htmlKopf hinzuzufügen hat bei mir funktioniert:

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

Ich hatte Probleme, bis ich den Inspektor benutzte und feststellte, dass durch Reagieren alles in ein div mit id = 'root' eingefügt wird, was bedeutet, dass 100% Höhe zusammen mit body und html für mich funktioniert.

<div style={{ height: "100vh", background: "#2d405f" }}>
   <Component 1 />
   <Component 2 />
</div>

Erstellen Sie ein Div mit Vollbild mit der Hintergrundfarbe # 2d405f

versuchen Sie es mit! wichtig in der Höhe. Es ist wahrscheinlich wegen eines anderen Stils, der Ihren HTML-Körper beeinflusst.

{ height : 100% !important; }

Sie können auch Werte in VP angeben, die die Höhe auf das von Ihnen erwähnte Port-Pixel einstellen, das height : 700vp;jedoch nicht portierbar ist.