J'essaie de programmer une calculatrice pour l'école utilisant la grille CSS. S'il vous plaît se référer à mon codépen ci-dessous. Pourquoi mon https://codepen.io/codpenio/pen/nwpkryy P > p> #result code> div masqué est-il masqué, quand il n'y a pas de contenu? Quand je mets dans n'importe quel texte, il est visible. Que dois-je faire pour le rendre visible même s'il n'y a pas de texte dedans? Merci
<div class="container" id="background">
<div id="result"></div>
<button id="delete" class="delete btn">Del</button>
<button id="modulo" value="%" class="btn operator opera-bg fall-back">%</button>
<button id="plus" value="+" class="btn operator opera-bg value align">+</button>
<button id="seven" value="7" class="btn number num-bg num first-child">7</button>
<button id="eight" value="8" class="btn number num-bg num">8</button>
<button id="nine" value="9" class="btn number num-bg num">9</button>
<button id="minus" value="-" class="btn operator opera-bg">-</button>
<button value="4" class="btn number num-bg num first-child">4</button>
<button value="5" class="btn number num-bg num">5</button>
<button value="6" class="btn number num-bg num">6</button>
<button value="*" class="btn operator opera-bg">x</button>
<button id="one" value="1" class="btn number num-bg num first-child">1</button>
<button id="two" value="2" class="btn number num-bg num">2</button>
<button id="three" value="3" class="btn number num-bg num">3</button>
<button id="divide" value="/" class="btn operator opera-bg">/</button>
<button id="zero" value="0" class="btn number zero" id="delete">0</button>
<button id="comma" value="." class="btn num-bg comma fall-back">.</button>
<button id="equal" value="=" class="btn equal align">=</button>
</div>
4 Réponses :
Vous pouvez utiliser min-hauteur ou insérer un 0:
p>
<div class="container" id="background"> <div id="result"></div> <button id="delete" class="delete btn">Del</button> <button id="modulo" value="%" class="btn operator opera-bg fall-back">%</button> <button id="plus" value="+" class="btn operator opera-bg value align">+</button> <button id="seven" value="7" class="btn number num-bg num first-child">7</button> <button id="eight" value="8" class="btn number num-bg num">8</button> <button id="nine" value="9" class="btn number num-bg num">9</button> <button id="minus" value="-" class="btn operator opera-bg">-</button> <button value="4" class="btn number num-bg num first-child">4</button> <button value="5" class="btn number num-bg num">5</button> <button value="6" class="btn number num-bg num">6</button> <button value="*" class="btn operator opera-bg">x</button> <button id="one" value="1" class="btn number num-bg num first-child">1</button> <button id="two" value="2" class="btn number num-bg num">2</button> <button id="three" value="3" class="btn number num-bg num">3</button> <button id="divide" value="/" class="btn operator opera-bg">/</button> <button id="zero" value="0" class="btn number zero" id="delete">0</button> <button id="comma" value="." class="btn num-bg comma fall-back">.</button> <button id="equal" value="=" class="btn equal align">=</button> </div>
Je ne sais pas grand chose à propos de la grille CSS, mais ce que vous pouvez faire cela attribuer une hauteur minimale au #Result et qui fonctionnera très bien.
parce que la valeur CSS par défaut de N'oubliez pas d'initialiser le CSS pour hauteur et largeur est auto , il ne serait pas consommé espace (invisible) quand il n'y a pas Contenu à l'intérieur du .
hauteur et largeur à tag.
Pour votre cas, essayez de résoudre le CSS de
hauteur fera.
0 commentaires
Vous avez défini la grille à l'aide de Le problème est que vous n'avez pas défini donc, votre Vous pouvez soit régler un Hauteur ou min-hauteur sur l'élément Ajoutez ceci à votre code: P> grille-great-zones code>, ce qui fonctionne bien dans votre configuration. Grid-Modèle -rouve code>, ce qui signifie que chaque ligne est dimensionnée par grille-auto-lignes code>, qui a une valeur par défaut de auto code> ou la taille basée sur le contenu (voir référence ci-dessous). p> #results code> ligne, quand il n'a pas de contenu, il suffit de s'effondrer à une hauteur zéro. P> #results code>, comme déjà proposé dans d'autres réponses à cette question ou définissez une hauteur sur la première rangée de la grille. p> #background {
display: grid;
grid-template-areas: "result result result result"
"delete delete modulo plus"
"seven eight nine minus"
"four five six multiply"
"one two three divide"
"zero comma equal equal";
grid-gap: 10px;
grid-template-rows: 50px; /* new */
}
Merci pour la description détaillée! Cela a travaillé parfaitement.
Ce n'est pas caché mais vide.