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

75

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): Geben Sie hier die Bildbeschreibung ein 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: Geben Sie hier die Bildbeschreibung ein

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

Jede Hilfe ist willkommen :)

Thibault Clement
quelle
2
Ihre Komponente <MyComponent ...>ist das, was dieses Div mit einer Reaktid erzeugt. Sie müssen also entweder eine Klasse oder einen Stil hinzufügen. zB<MyComponent className="full-height">
mnsr
Vielen Dank, Sie hatten Recht, ich habe gerade eine obere Komponente vergessen ..!
Thibault Clement

Antworten:

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

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

bora89
quelle
21
Während dieser Code die Frage möglicherweise beantwortet, würde die Bereitstellung eines zusätzlichen Kontexts darüber, wie und / oder warum das Problem gelöst wird, den langfristigen Wert der Antwort verbessern. Es tut auch nicht weh zu erwähnen, warum diese Antwort angemessener ist als andere.
Dev-iL
1
@ Dev-iL sagt eher, was getan werden soll, warum nicht tun, was getan werden soll.
Valen
1
Das Festlegen der Werte für htmlund bodyist erforderlich, da dies 100%dem "nächsten" übergeordneten Element folgt, das die Dimension explizit angegeben hat. Das heißt, wenn beide htmlund bodynicht spezifiziert haben height, haben Kinder mit height: 100%keine Wirkung.
Valen
Zu welcher CSS-Datei soll dies hinzugefügt werden?
Samuel Rosenstein
Sie sollten dies zu index.css hinzufügen. Vergessen Sie auch nicht, den Namen der "App" zu ändern.
Alexander Santos
34

Sie könnten auch tun:

body > #root > div {
  height: 100vh;
}
Daniel Kim
quelle
3
Vielen Dank. In meinem Fall habe ich es verpasst, die Höhe durch #root
Dave Pile am
Dieser hat für mich gearbeitet. Vielen Dank
Eldhose
22

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

[data-reactroot] 
        {height: 100% !important; }
Michaelfeng
quelle
3
Sollte die akzeptierte Antwort. Um sicher zu sein, fügen Sie hinzu:position: absolute; width: 100% !important; height: 100% !important;
Yousphere
2
Dies funktioniert, kann jedoch Probleme mit anderen Komponenten verursachen. Es muss einen "korrekteren" Weg geben, dies zu tun.
Etwas
9
Wo hast du das hinzugefügt?
Jack
16

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

Selbstmordhase
quelle
7

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>
   );
}
Maeneak
quelle
6

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.

Aman Parmar
quelle
5
#app {
  height: 100%;
  min-height: 100vh;
}

Immer volle Sichthöhe min

David Douglas
quelle
4
body{
  height:100%
}

#app div{
  height:100%
}

das funktioniert bei mir ..

user3785155
quelle
Dadurch haben alle Divs irgendwo darunter #appeine Höhe von 100%. Sie können verwenden #app>div, nur unmittelbare Kinder Divs von#app
Danny Harding
3

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.
Shevchenko Viktor
quelle
3

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!

Dennis LLopis
quelle
1

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;
}
Dave Pile
quelle
0

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>
var foobar
quelle
! wichtig sollte nicht bevorzugt werden.
Nitin Jadhav
0

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.

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

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

jafarmlp
quelle
-1

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.

NishanthSpShetty
quelle
Die Verwendung ist importantin den meisten Fällen ein Indikator für eine schlechte Lösung. Das Problem besteht darin, wie sich die Höhe in verschachtelten Elementen verhält.
Shevchenko Viktor