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 :)
<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">
Antworten:
html, body, #app, #app>div { height: 100% }
Dies stellt sicher, dass die gesamte Kette vorhanden ist
height: 100%
quelle
html
undbody
ist erforderlich, da dies100%
dem "nächsten" übergeordneten Element folgt, das die Dimension explizit angegeben hat. Das heißt, wenn beidehtml
undbody
nicht spezifiziert habenheight
, haben Kinder mitheight: 100%
keine Wirkung.Sie könnten auch tun:
body > #root > div { height: 100vh; }
quelle
Es nervt mich tagelang. Und schließlich benutze ich den CSS-Eigenschaftswähler, um es zu lösen.
[data-reactroot] {height: 100% !important; }
quelle
position: absolute; width: 100% !important; height: 100% !important;
Versuchen
<div style = {{height:"100vh"}}> </div>
quelle
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> ); }
quelle
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.
quelle
#app { height: 100%; min-height: 100vh; }
Immer volle Sichthöhe min
quelle
body{ height:100% } #app div{ height:100% }
das funktioniert bei mir ..
quelle
#app
eine Höhe von 100%. Sie können verwenden#app>div
, nur unmittelbare Kinder Divs von#app
Trotz der Verwendung von React hier ist das Elementlayout vollständig eine HTML / CSS-Funktion.
Die Hauptursache des Problems liegt in der Funktionsweise von
height
Eigenschaften 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, umdiv.app
100% 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:
!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.position: absolute
. Die Eigenschaftpositon
soll ä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 trotzposition: absolute; top: 0; right: 0; bottom: 0; left: 0;
wird zu dem gleichen Aussehen führen - es drängt Sie auch dazu, die Elternposition
zu etwas nicht zu ändernstatic
- 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.quelle
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!
quelle
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; }
quelle
Das im
index.html
Kopf hinzuzufügen hat bei mir funktioniert:<style> html, body, #app, #app>div { position: absolute; width: 100% !important; height: 100% !important; } </style>
quelle
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.
quelle
<div style={{ height: "100vh", background: "#2d405f" }}> <Component 1 /> <Component 2 /> </div>
Erstellen Sie ein Div mit Vollbild mit der Hintergrundfarbe # 2d405f
quelle
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.quelle
important
in 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.