La hauteur ne fonctionne pas avec calc() dans le stylet

J'utilise un stylet dans mon projet React. J'utilise la fonction calc pour définir la hauteur de certains divs. Mais le calc ne s'applique pas. Du coté client quand j'inspecte l'élément, je vois l'attribut height comme calc mais l'élément n'y obéit pas. Voilà comment je suis en train de hauteurLa hauteur ne fonctionne pas avec calc() dans le stylet

.ht-full-70 { 
    height: calc(100% - 70px) !important; 
}

Quand je visite, je peux voir le style il

Mais élément ne prend pas cela. Il reste non affecté par cela.

Source

2017-08-30 ApurvG

Je suppose que le parent n'a pas la hauteur définir ou votre élément est bloque pas comme – lumio

D'abord, je voudrais vérifier le parent de voir quelle hauteur cela a. A noter quand j'inspecte un élément avec une hauteur de calcul ceci l'affichera, pas ce que cela fonctionne comme. – wrayvon

Ok donc c'est div parent a la hauteur: calc (100% -20px) qui ne fonctionne pas non plus et puis le parent suivant a la hauteur 100% – ApurvG

Je pense que vous avez besoin d'un div autour de l'élément pour lequel vous essayez de définir une largeur. Ceci s'assurera que l'élément a un point de départ défini pour les pourcentages si vous donnez également une hauteur à cette enveloppe. Je le démontre dans cet extrait.

.ht-wrap { 
 
    padding-top:20px; 
 
    display;inline-block; 
 
    height:280px; 
 
    background-color:blue; 
 
} 
 

 
.ht-full-70 { 
 
    padding:6px; 
 
    display;inline-block; 
 
    height: calc(100% - 70px) !important; 
 
    background-color:red; 
 
}

<div class="ht-wrap"> 
 
    <div class="ht-full-70"> 
 
    <p>Text.</p> 
 
    </div> 
 
</div>

Source

2017-08-30 14:56:59 wariostarx

Parce que .ht-full-70 'balise parent s ne fixe pas height

Vous devez définir height de .ht-full-70' étiquette mère s.

Source

2017-08-30 13:59:41 zynkn

Ok donc c'est div parent a la hauteur: calc (100% -20px) qui doesn ' t travail et ensuite le parent a la hauteur 100%. – ApurvG

Définir la hauteur du corps. Par exemple, 'body {height: 100vh}' – zynkn

Mais quand je règle la hauteur: 700px alors ça marche. calc devrait également travailler alors, non? – ApurvG

La hauteur ne fonctionne pas avec calc() dans le stylet

Répondre

Questions connexes