web-dev-qa-db-fra.com

React - Composant Plein écran (avec hauteur 100%)

Je suis coincé avec l'affichage d'un composant React nommé "home" qui prend 100% de la hauteur de mon écran . Quel que soit le style CSS ou le style en ligne React, cela ne fonctionne pas.

Dans l'exemple ci-dessous, html, body et #app sont définis à la hauteur: 100% en CSS. Pour .home, j’ai utilisé le style inline (mais quel que soit le style CSS ou inline, c’est la même chose):  enter image description here Le problème semble provenir de <div data-reactroot data-reactid='1'> qui n'est pas défini avec height: 100%.

Si je l'ai piraté avec l'outil de développement Chrome, c'est du travail:  enter image description here

Alors, quelle est la bonne façon d’afficher un composant de hauteur complète dans React?

Toute aide est la bienvenue :)

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

Cela garantira que toute la chaîne sera height: 100%

26
bora89

Cela m'agace pendant des jours. Et enfin, je me sers du sélecteur de propriétés CSS pour le résoudre.

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

Vous pouvez aussi faire:

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

Bien que cela puisse ne pas être la solution idéale, essayez ceci:

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

Il garde la taille attachée aux bordures, ce qui n’est pas ce que vous voulez, mais vous donne un effet similaire.

6
Aman Parmar

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

4
Suicide Bunny
body{
 height:100%
}

#app div{
height:100%
}

cela fonctionne pour moi ..

2
user3785155

J'ai réussi cela avec une classe css dans mon app.css

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

Appliquez-le à votre élément racine dans votre méthode render ()

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

Ou en ligne

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

J'ai eu le même problème affichant la hauteur de mon panneau de navigation latérale à 100%.

Mes démarches pour y remédier étaient les suivantes:

Dans le fichier index.css ------

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

Dans le sidePanel.css (cela me donnait des problèmes):

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

D'autres attributs ont été supprimés pour plus de clarté, mais je pense que le problème réside dans la réduction de la hauteur à 100% dans des conteneurs imbriqués, comme vous essayez de réduire la hauteur dans vos conteneurs imbriqués. La hauteur des classes parentes devra être appliquée à 100%. - Ce qui m’intéresse, c’est pourquoi on s’arrête: la position corrige la balance et échoue sans elle; C'est quelque chose que j'apprendrai éventuellement avec un peu plus de pratique.

Je travaille avec Rea depuis une semaine maintenant et je suis un novice dans le développement Web, mais je voulais partager un correctif que j'ai découvert avec une hauteur de redimensionnement de 100%. J'espère que cela vous aide, vous ou toute personne ayant un problème similaire. Bonne chance!

1
Dennis LLopis

Pour un projet utilisant CRNA, j'utilise thisin index.css

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

et puis dans mon App.css j'utilise ce

.App {
  height: 100%;
}

et définissez également la hauteur à 100% pour une div dans App s'il en existe une, par exemple.

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

Malgré l'utilisation de React ici - la disposition des éléments est une fonctionnalité complètement HTML/CSS.

La cause première du problème réside dans le fonctionnement de la propriété height dans css. Lorsque vous utilisez des valeurs relatives pour la hauteur (en%), cela signifie que la hauteur sera définie par rapport à son parent.

Donc, si vous avez une structure comme html > body > div#root > div.app - pour faire div.app 100% de hauteur tous ses ancêtres devrait avoir 100% de hauteur. Vous pouvez jouer avec l'exemple suivant:

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>

Quelques arguments:

  • Utilisation de !important - malgré un certain temps, cette fonctionnalité est utile dans ~ 95% des cas, elle indique une structure médiocre de html/css. En outre, ce n'est pas une solution au problème actuel.
  • Pourquoi pas position: absolute. La propriété positon est conçue pour modifier la manière dont l'élément sera rendu par rapport à (position propre - relative, fixe à la fenêtre - fixe, parent le plus proche dont la position n'est pas statique - absolue). Si malgré position: absolute; top: 0; right: 0; bottom: 0; left: 0; vous obtiendrez le même aspect, cela vous poussera également à changer les parents position en quelque chose de non static - vous devez donc conserver 2 éléments. Cela entraîne également la réduction de la division parent dans une ligne (hauteur-0) et dans un écran interne. Cela crée une confusion dans l’inspecteur d’éléments.
0
Shevchenko Viktor

essayez d'utiliser! important en hauteur. C'est probablement à cause d'un autre style qui affecte votre corps HTML. 

{ height : 100% !important; }

vous pouvez aussi donner des valeurs en VP qui vont régler la hauteur au pixel du port visible que vous mentionnez commeheight : 700vp; mais ce ne sera pas portable.

0
NishanthSpShetty

Ajouter ceci dans la tête index.html a fonctionné pour moi:

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