html - 为什么我的网格行/网格项在其中没有内容时被隐藏了？

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

您可以使用最小高度或插入 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';}