如果其中没有内容，为什么我的网格行/网格项被隐藏？

Question

我正在尝试使用CSS网格为学校编程计算器。请参考下面的我的codepen。当我的#result div中没有​​内容时，为什么将其隐藏？当我输入任何文本时，它是可见的。即使没有文本，我该怎么做才能使其可见？谢谢

https://codepen.io/Codpenio/pen/NWPKRYy

#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;
}

.btn {
  border: 0;
  font-size: 3rem;
}

.number {
  color: white;
  background-color: #555555;
}

.operator {
  color: white;
  background-color: #355d77;
}

.delete {
  color: white;
  background-color: #ab002d;
}

.equal {
  color: white;
  background-color: #1f7a29;
}

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

#delete {
  grid-area: delete;
}

#modulo {
  grid-area: modulo;
}

#plus {
  grid-area: plus;
}

#minus {
  grid-area: minus;
}

#divide {
  grid-area: divide;
}

#multiply {
  grid-area: multiply;
}

#comma {
  grid-area: comma;
  background-color: #355d77;
  color: white;
}

#equal {
  grid-area: equal;
}

#zero {
  grid-area: zero;
}

#one {
  grid-area: one;
}

#two {
  grid-area: two;
}

#three {
  grid-area: three;
}

#four {
  grid-area: four;
}

#five {
  grid-area: five;
}

#six {
  grid-area: six;
}

#seven {
  grid-area: seven;
}

#eight {
  grid-area: eight;
}

#nine {
  grid-area: nine;
}

<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>

Answer 1

您可以使用min-height或插入0：

#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;
}

.btn {
  border: 0;
  font-size: 3rem;
}

.number {
  color: white;
  background-color: #555555;
}

.operator {
  color: white;
  background-color: #355d77;
}

.delete {
  color: white;
  background-color: #ab002d;
}

.equal {
  color: white;
  background-color: #1f7a29;
}

#result {
  grid-area: result;
  background-color: #464646;
  color: #ebebeb;
  font-family: "Courier New";
  text-align: right;
  min-height: 1.6em;
  font-size: 3rem;
}

#delete {
  grid-area: delete;
}

#modulo {
  grid-area: modulo;
}

#plus {
  grid-area: plus;
}

#minus {
  grid-area: minus;
}

#divide {
  grid-area: divide;
}

#multiply {
  grid-area: multiply;
}

#comma {
  grid-area: comma;
  background-color: #355d77;
  color: white;
}

#equal {
  grid-area: equal;
}

#zero {
  grid-area: zero;
}

#one {
  grid-area: one;
}

#two {
  grid-area: two;
}

#three {
  grid-area: three;
}

#four {
  grid-area: four;
}

#five {
  grid-area: five;
}

#six {
  grid-area: six;
}

#seven {
  grid-area: seven;
}

#eight {
  grid-area: eight;
}

#nine {
  grid-area: nine;
}

<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>

---

要插入0，可以使用:empty伪类：#result:empty:before {content:'0';}

Answer 2

我对CSS网格了解不多，但是您可以做什么来为#result指定一个最小高度，这样就可以了。

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

Answer 3

由于height和width的默认CSS值为auto，因此<div>中没有内容时不会占用空间（不可见）。

仅记得初始化height和width至<div>标签的CSS。 对于您的情况，请尝试修复height的CSS。

Answer 4

您已经使用grid-template-areas定义了网格，该网格在您的设置中效果很好。

问题是您没有定义grid-template-rows，这意味着每一行的大小均按grid-auto-rows设置，其默认值为auto或基于内容的大小（请参阅下面的参考。）

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

您可以在#results项目上设置高度或最小高度，如对此问题的其他答案中已经建议的那样，或者在网格的第一行上定义高度。

将此添加到您的代码中：

#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 */
}

revised codepen

现在第一行具有定义的高度。其余行具有基于内容的高度。

---

  

§ 7.1. The Explicit Grid

     

由grid-template-areas定义但不具有大小的任何行/列   grid-template-rows / grid-template-columns从   grid-auto-rows / grid-auto-columns属性。