CSS 100% Höhe funktioniert nicht in React App

Ich versuche Flexbox in meiner React App zu verwenden, um eine einfache zweispaltige Webseite zu erstellen, die die volle Breite und Höhe einnimmt.CSS 100% Höhe funktioniert nicht in React App

Ich kann dies mit HTML und CSS allein, aber nicht in einer React App arbeiten.

Bisher habe ich:

:root { 
    overflow-x: hidden; 
    height: 100%; 
} 

body { 
    min-height: 100% 
} 

.flexbox { 
    height: 100%; 
    display: flex; 
} 

.left { 
    flex: 0 0 200px; 
    height: 100% 
} 

.right { 
    flex: 1 
}

und:

<div class="flexbox"> 
    <div class="left"> 
    Left 
    </div> 
    <div class="right"> 
    Right 
    </div> 
</div>

Ich weiß, dass ich für die zusätzliche <div id="root"></div> Tag in meinem index.html berücksichtigen müssen, so habe ich hinzugefügt auch die folgenden meiner css :

#root { 
    height: 100%; 
}

Und meine render Funktion :

render() { 
    return (
    <div className="flexbox"> 
     <div className="left">Left</div> 
     <div className="right">Right</div> 
    </div> 
) 
}

aber das funktioniert nicht. Die Spalten existieren, haben aber keine volle Höhe. Warum nicht?

Quelle

2017-10-16 tommyd456

mir verzeihen, wenn ich dumm klingen, aber Sie Ihre CSS-Datei direkt importieren? – Dane

Ja, ich bin 'links' und' rechts' habe eigentlich Hintergrundfarben und sie zeigen. – tommyd456

können Sie diesen Link verweisen: - https: // stackoverflow.com/questions/6654958/make-body-have-100-von-der-browser-höhe –

Der Textkörper sieht im übergeordneten Text (HTML) nach, wie die dynamische Eigenschaft skaliert wird. Daher muss das HTML-Element auch seine Höhe haben.

Allerdings muss sich der Inhalt von body wahrscheinlich dynamisch ändern. Wenn Sie min-height auf 100% setzen, wird dieses Ziel erreicht.

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

Quelle

2017-10-16 12:02:02

'html' hat eine höhe - siehe': root' – tommyd456

Remember - this funktioniert außerhalb von React (HTML und CSS) – tommyd456

check meine letzte Bearbeitung. Mindesthöhe: -> Höhe. es funktioniert gut für mich. –

Verwenden Ansichtsfenster Höheneinheiten in CSS:

#root { 
    min-height: 100vh; 
}

Quelle

2017-10-16 12:11:39 zdolny

Ich möchte wirklich verstehen, warum mein Code in der React App nicht funktioniert ??? – tommyd456

Es wirklich nicht? Es sollte funktionieren, Sie können stattdessen versuchen, 'min-height: 100vh;' in Ihrer 'flexbox' Klasse zu setzen. Es funktioniert für mich, vielleicht überschreibt etwas dein CSS? – zdolny

@ tommyd456 Arbeitsbeispiel: https://jsfiddle.net/2q73angs/ – zdolny

Try This:

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

Quelle

2017-10-16 12:25:48

Sie müssen die Höhe des Wurzel HTML-Tag setzen 100% sein:

html { 
    height: 100%; 
}

Eine andere Technik Höhe einzustellen direkt wäre, mit viewport units:

targetelement { 
    height: 100vh; 
}

Ich vermute, Sie könnten interessiert sein in letzterem, angesichts Ihrer Vorliebe für Flexbox. Ich persönlich finde es viel einfacher als Elemente mit abhängigen Prozentsätzen zu schichten.

Quelle

2017-10-16 12:53:02

': root' ist das selbe wie' html' – tommyd456

Sie haben vergessen, dass <html> auch ein Tag ist. Außerdem ist es Eltern aller Eltern! Deshalb sollten Sie ihm auch eine Höhe von 100% geben.

html, body { height: 100%; }

Quelle

2017-10-16 12:59:38 Vitiok

': root' ist dasselbe wie' html' – tommyd456

CSS 100% Höhe funktioniert nicht in React App

Antwort

Verwandte Themen