Div не отображается на экране, мне не хватает некоторых CSS свойств?

Question

Я создал эту персональную веб-страницу, и по какой-то причине последняя часть страницы (контейнер таблицы) не отображается на экране.

* {
  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-div {
  display: table;
  height: 100%;
}

#row-div {
  display: table-row;
  height: 100%;
}

.image-title {
  display: table-cell;
  background-size: cover;
  background-repeat: no-repeat;
  width: 30%;
  height: 30%;
}

#first {
  background: url(first.jpg);
  width: 100%;
}

#second {
  background: url(second.jpg);
  height: 100%;
}

#third {
  background: url(third.jpg.);
}

#forth {
  background: url(forth.jpg);
}

<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">
  <div id="table-div">
    <div id="row-div">
      <div id="first" class="image-div">
      </div>
      <div id="second" class="image-div">
      </div>
      <div id="third" class="image-div">
      </div>
      <div id="forth" class="image-div">
      </div>
    </div>
  </div>
</div>
<h1 id="fotter-title">My Gallery</h1>

Я попытался включить соответствующий код.

У меня вопрос, почему я не вижу последнюю таблицу (внутри «нижнего колонтитула») div id) Мне не хватает некоторых свойств?

Спасибо за помощников!

Answer 1

Элемент #table-div нуждается в определенной ширине. В противном случае он будет свернут до нуля пикселей, поскольку в дочерних элементах нет содержимого.

Для элементов нижнего уровня также следует использовать display: table-cell.

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

body,
html {
  height: 100%;
}

#fotter {
  height: 30%;
  background-image: url(bottom.jpg);
  background-size: cover;
  opacity: 0.6;
  display: flex;
}
#table-div {
  display: table;
  height: 100%;
  width: 100%;
}

#row-div {
  display: table-row;
  height: 100%;
}

#row-div > div {
  display: table-cell;
  outline: 1px solid orange;
}

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

<div id="fotter">
  <div id="table-div">
    <div id="row-div">
      <div id="first" class="image-div">
      </div>
      <div id="second" class="image-div"> 
      </div>
      <div id="third" class="image-div">
      </div>
      <div id="forth" class="image-div">
      </div>
    </div>
  </div>
</div>

Answer 2

Задумывались ли вы надеть <table> вместо <div>?

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

и CSS:

* {
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);
   }