Html Div没有显示在屏幕上，我是否缺少一些CSS属性？

我创建了这个个人网页，由于某种原因，页面的最后一部分（表容器）没有显示在屏幕上

*{
填充：0%；
利润率：0%；
}
身体，
html{
身高：100%；
}
/*这里有更多CSS属性（与此问题无关）*/
#福特{
身高：30%；
背景图片：url（bottom.jpg）；
背景尺寸：封面；
不透明度：0.6；
显示器：flex；
}
#福特书名{
位置：绝对位置；
底部：22%；
左：45%；
字体大小：250%；
}
#表分区{
显示：表格；
身高：100%；
}
#行分区{
显示：表格行；
身高：100%；
}
.图片标题{
显示：表格单元格；
背景尺寸：封面；
背景重复：无重复；
宽度：30%；
身高：30%；
}
#首先{
背景：url（first.jpg）；
宽度：100%；
}
#第二{
背景：url（second.jpg）；
身高：100%；
}
#第三{
背景：url（third.jpg.）；
}
#四{
背景：url（forth.jpg）；
}

嗨，我叫伊曼纽尔·辛瓦尼


My Gallery

元素需要定义宽度。否则它将塌陷为零像素，因为子元素中没有内容

底层div还应使用

display:table cell

*{
填充：0%；
利润率：0%；
}
身体，
html{
身高：100%；
}
#福特{
身高：30%；
背景图片：url（bottom.jpg）；
背景尺寸：封面；
不透明度：0.6；
显示器：flex；
}
#表分区{
显示：表格；
身高：100%；
宽度：100%；
}
#行分区{
显示：表格行；
身高：100%；
}
#行div>div{
显示：表格单元格；
轮廓：1px实心橙色；
}
#首先{
背景：url(https://placehold.it/100x100?text=FIRST);
}
#第二{
背景：url(https://placehold.it/100x100?text=SECOND);
}
#第三{
背景：url(https://placehold.it/100x100?text=THIRD);
}
#四{
背景：url(https://placehold.it/100x100?text=FORTH);
}

元素需要定义宽度。否则它将塌陷为零像素，因为子元素中没有内容

底层div还应使用

display:table cell

*{
填充：0%；
利润率：0%；
}
身体，
html{
身高：100%；
}
#福特{
身高：30%；
背景图片：url（bottom.jpg）；
背景尺寸：封面；
不透明度：0.6；
显示器：flex；
}
#表分区{
显示：表格；
身高：100%；
宽度：100%；
}
#行分区{
显示：表格行；
身高：100%；
}
#行div>div{
显示：表格单元格；
轮廓：1px实心橙色；
}
#首先{
背景：url(https://placehold.it/100x100?text=FIRST);
}
#第二{
背景：url(https://placehold.it/100x100?text=SECOND);
}
#第三{
背景：url(https://placehold.it/100x100?text=THIRD);
}
#四{
背景：url(https://placehold.it/100x100?text=FORTH);
}

---

你有没有想过把

换成

---

你有没有想过把

换成

---

div没有内容。你希望看到什么？嗨，背景-我有一些个人图片，我希望看到这些没有内容的div。你希望看到什么？嗨，背景-我有一些我希望看到的个人图像我使用了@Turnip背景图像作为相同的样本。嗨，“table”会起作用，但据我所知，“div”更常用，我想练习这个表单。所以也许你想试试grid？我使用@Turnip背景图像作为相同的样本。嗨，“table”会有用的，但据我所知，“div”更常用，我想练习这个表单。所以也许你想试试grid？

<div id="heading"></div>
 <h1 id="heading-title">Hi, my name is Imanuel Sinwany</h1>
  <div id="body-div">
   <div id="left-div">
    <div id="body-text">
     <p>...............</p>
     <p>...............</p>
    </div>
   </div>
  <div id="right-div"></div>
</div>
 <div id="fotter">
  <table id="table-div">
   <tr id="row-div">
    <td id="first" class="image-div"></td>
    <td id="second" class="image-div"></td>
    <td id="third" class="image-div"></td>
    <td id="forth" class="image-div"></tr>
   </tr>
  </table>
  </div>
 <h1 id="fotter-title">My Gallery</h1>

* {
padding: 0%;
margin: 0%;
 }

body, html {
 height: 100%;
 }

 /* more CSS properties goes here (not relevant for this question)*/
#fotter {
  height: 30%;
  background-image: url(bottom.jpg);
  background-size: cover;
  opacity: 0.6;
  display: flex;
  }

 #fotter-title {
   position: absolute;
   bottom: 22%;
   left: 45%;
   font-size: 250%;
   }

 table {
   border: 1px solid red;
   width: 100%;
   height: 100%;
   }

 #row-div {
   height: 100%;
  }

 #first {
   background: url(https://placehold.it/100x100?text=FIRST);
  }

  #second {
   background: url(https://placehold.it/100x100?text=SECOND);
   }

  #third {
    background: url(https://placehold.it/100x100?text=THIRD);
  } 

  #forth {
   background: url(https://placehold.it/100x100?text=FORTH);
   }