it-swarm.com.de

Reagieren - Komponente Vollbild (mit Höhe 100%)

Ich zeige mir die Anzeige einer React-Komponente mit dem Namen "home", die 100% der Bildschirmhöhe ausmacht. Was auch immer ich CSS oder den Inline-Style "React" verwende, funktioniert es nicht.

Im folgenden Beispiel werden html, body und #app auf Höhe gesetzt: 100% in CSS. Für .home habe ich Inline-Style verwendet (was auch immer ich CSS oder Inline-Style verwendete, ist derselbe):  enter image description here Das Problem scheint von <div data-reactroot data-reactid='1'> zu kommen, das nicht mit der Höhe festgelegt ist: 100%.

Wenn ich es mit dem Chrome-Entwicklertool gehackt habe, funktioniert es:  enter image description here

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

Jede Hilfe ist willkommen :)

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

Dadurch wird sichergestellt, dass die gesamte Kette height: 100% ist.

26
bora89

Es ärgert mich seit Tagen. Und zum Schluss benutze ich den CSS-Eigenschaftsselektor, um ihn zu lösen.

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

Sie könnten auch tun:

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

Dies ist zwar nicht die ideale Antwort, aber versuchen Sie dies:

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

Es behält die Größe an den Rändern, was nicht gewünscht ist, aber einen gewissen Effekt hat.

6
Aman Parmar

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

4
Suicide Bunny
body{
 height:100%
}

#app div{
height:100%
}

das funktioniert für mich ..

2
user3785155

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

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

Wenden Sie es auf Ihr Stammelement in Ihrer render () -Methode 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>
   );
}
1
maeneak

Ich hatte das gleiche Problem beim Anzeigen der Höhe meines Navigationsbereichs 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 (das 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 in der Skalierung der Höhe auf 100% in verschachtelten Containern, wie Sie versuchen, die Höhe in Ihren verschachtelten Containern zu skalieren. Die Höhe der Elternklassen muss auf 100% angewendet werden. - Worauf ich neugierig bin, ist der Grund: Die Position korrigiert die Skala und versagt ohne sie. Das ist etwas, was ich irgendwann mit etwas mehr Übung lernen werde.

Ich arbeite jetzt seit einer Woche mit "React" und bin ein Anfänger in der Webentwicklung, aber ich wollte eine Korrektur mitteilen, die ich mit einer Skalierungshöhe von 100% entdeckt habe. Ich hoffe, das hilft Ihnen oder jedem, der ein ähnliches Problem hat. Viel Glück!

1
Dennis LLopis

Für ein Projekt mit CRNA benutze ich thisin index.css

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

und dann in meiner App.css benutze ich das

.App {
  height: 100%;
}

und auch die Höhe für ein div innerhalb der App auf 100% setzen, wenn

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

Trotz der Verwendung von React ist das Layout der Elemente vollständig HTML/CSS.

Die Ursache des Problems liegt in der Funktionsweise der Eigenschaft height 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.app zu erstellen, sollte 100% height alle seine Vorfahren 100% height sein. 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 und 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 positon dient zum Ändern der Darstellung des Elements in Bezug auf (eigene Position - relativ, Ansichtsfenster - fest, nächstgelegenes übergeordnetes Element, dessen Position nicht statisch - absolut ist). Ans, obwohl position: absolute; top: 0; right: 0; bottom: 0; left: 0; dasselbe Aussehen ergibt - es zwingt Sie auch, die Eltern position in etwas zu ändern, das nicht static ist - Sie müssen also 2 Elemente pflegen. Dies führt auch dazu, dass das übergeordnete Div in einer Zeile (Höhe 0) reduziert wird und der innere - Vollbildmodus angezeigt wird. Das führt zu Verwirrung im Elementinspektor.
0

versuchen Sie es mit! wichtig in der Höhe. Es liegt wahrscheinlich an einem anderen Stil, der sich auf Ihren HTML-Körper auswirkt. 

{ height : 100% !important; }

sie können auch Werte in VP angeben, mit denen die Höhe des viee Port-Pixels festgelegt wird, das Sie wie height : 700vp; erwähnen. Dies wird jedoch nicht portabel sein.

0

Das Hinzufügen im index.html-Kopf hat für mich funktioniert:

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