Html 当有'；这里面没有内容吗？

我正在尝试使用css网格为学校编写一个计算器。请参考下面我的代码笔。为什么我的

#result

div没有内容，却被隐藏了？当我输入任何文本时，它都是可见的。即使没有文本，我该如何使其可见？谢谢

#背景{
显示：网格；
网格模板区域：“结果”“删除删除模加”“七八九减”“四五六乘”“一二三除”“零逗号相等”；
栅隙：10px；
}
.btn{
边界：0；
字体大小：3rem；
}
.号码{
颜色：白色；
背景色：#555555；
}
.接线员{
颜色：白色；
背景色：#355d77；
}
.删除{
颜色：白色；
背景色：#ab002d；
}
.相等{
颜色：白色；
背景色：#1f7a29；
}
#结果{
网格面积：结果；
背景色：#4646；
颜色：#ebebeb；
字体系列：“信使新”；
文本对齐：右对齐；
}
#删除{
网格区域：删除；
}
#模{
网格面积：模；
}
#加上{
网格面积：加；
}
#减去{
网格面积：负；
}
#分开{
网格区域：划分；
}
#倍增{
网格面积：乘法；
}
#逗号{
网格区域：逗号；
背景色：#355d77；
颜色：白色；
}
#相等的{
网格面积：相等；
}
#零{
网格面积：零；
}
#一个{
网格面积：1；
}
#两个{
网格面积：2个；
}
#三{
网格面积：3个；
}
#四{
网格面积：4个；
}
#五{
网格面积：5个；
}
#六{
网格面积：6个；
}
#七{
网格面积：7个；
}
#八{
网格面积：8个；
}
#九{
网格面积：9个；
}

德尔
%
+
7.
8.
9
-
4.
5.
6.
x
1.
2.
3.
/
0
.
=

您可以使用最小高度或插入0：

#背景{
显示：网格；
网格模板区域：“结果”“删除删除模加”“七八九减”“四五六乘”“一二三除”“零逗号相等”；
栅隙：10px；
}
.btn{
边界：0；
字体大小：3rem；
}
.号码{
颜色：白色；
背景色：#555555；
}
.接线员{
颜色：白色；
背景色：#355d77；
}
.删除{
颜色：白色；
背景色：#ab002d；
}
.相等{
颜色：白色；
背景色：#1f7a29；
}
#结果{
网格面积：结果；
背景色：#4646；
颜色：#ebebeb；
字体系列：“信使新”；
文本对齐：右对齐；
最小高度：1.6em；
字体大小：3rem；
}
#删除{
网格区域：删除；
}
#模{
网格面积：模；
}
#加上{
网格面积：加；
}
#减去{
网格面积：负；
}
#分开{
网格区域：划分；
}
#倍增{
网格面积：乘法；
}
#逗号{
网格区域：逗号；
背景色：#355d77；
颜色：白色；
}
#相等的{
网格面积：相等；
}
#零{
网格面积：零；
}
#一个{
网格面积：1；
}
#两个{
网格面积：2个；
}
#三{
网格面积：3个；
}
#四{
网格面积：4个；
}
#五{
网格面积：5个；
}
#六{
网格面积：6个；
}
#七{
网格面积：7个；
}
#八{
网格面积：8个；
}
#九{
网格面积：9个；
}

德尔
%
+
7.
8.
9
-
4.
5.
6.
x
1.
2.
3.
/
0
.
=

您可以使用最小高度或插入0：

#背景{
显示：网格；
网格模板区域：“结果”“删除删除模加”“七八九减”“四五六乘”“一二三除”“零逗号相等”；
栅隙：10px；
}
.btn{
边界：0；
字体大小：3rem；
}
.号码{
颜色：白色；
背景色：#555555；
}
.接线员{
颜色：白色；
背景色：#355d77；
}
.删除{
颜色：白色；
背景色：#ab002d；
}
.相等{
颜色：白色；
背景色：#1f7a29；
}
#结果{
网格面积：结果；
背景色：#4646；
颜色：#ebebeb；
字体系列：“信使新”；
文本对齐：右对齐；
最小高度：1.6em；
字体大小：3rem；
}
#删除{
网格区域：删除；
}
#模{
网格面积：模；
}
#加上{
网格面积：加；
}
#减去{
网格面积：负；
}
#分开{
网格区域：划分；
}
#倍增{
网格面积：乘法；
}
#逗号{
网格区域：逗号；
背景色：#355d77；
颜色：白色；
}
#相等的{
网格面积：相等；
}
#零{
网格面积：零；
}
#一个{
网格面积：1；
}
#两个{
网格面积：2个；
}
#三{
网格面积：3个；
}
#四{
网格面积：4个；
}
#五{
网格面积：5个；
}
#六{
网格面积：6个；
}
#七{
网格面积：7个；
}
#八{
网格面积：8个；
}
#九{
网格面积：9个；
}

德尔
%
+
7.
8.
9
-
4.
5.
6.
x
1.
2.
3.
/
0
.
=

我对CSS网格了解不多，但你能做的是为#结果指定一个最小高度，这样就可以了

#result {
 grid-area: result;
 background-color: #464646;
 color: #ebebeb;
 font-family: "Courier New";
 text-align: right;
 min-height:59px;
}

---

我对CSS网格了解不多，但你能做的是为#结果指定一个最小高度，这样就可以了

#result {
 grid-area: result;
 background-color: #464646;
 color: #ebebeb;
 font-family: "Courier New";
 text-align: right;
 min-height:59px;
}

---

由于

高度

和

宽度

的默认CSS值为

自动

，因此当

中没有内容时，它不会占用空间（不可见）

只需记住将
高度
和
宽度
的CSS初始化为
标记。
对于您的情况，尝试修复
height
的CSS即可
 因为
高度
和
宽度
的默认CSS值是
自动
，所以当
中没有内容时，它不会占用空间（不可见）

只需记住将
高度
和
宽度
的CSS初始化为
标记。
对于您的情况，尝试修复
height
的CSS即可
 您已经使用
网格模板区域定义了网格，这在您的设置中非常有效

问题是您没有定义
网格模板行
，这意味着每一行的大小都是由
网格自动行
确定的，默认值为
自动
，或基于内容的大小（请参阅下面的参考资料）

因此，当您的
#results
行没有内容时，它只会折叠到零高度