css динамический липкий нижний колонтитул с использованием display: table - почему это работает?

Question

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

1. Почему .main div имеет height: 100%, но при отображении не охватывает всю высоту веб-страницы?
2. Почему display: table-row; существует только для .footer div, но не для .main?
3. Почему этот код заставляет .footer div вести себя как динамический липкий нижний колонтитул!?

Есть некоторый Javascript, но он только для кнопок. Все динамическое поведение - это просто CSS и HTML-код.

Вот код:

document.querySelector(".button1").addEventListener("click", function(){
    var element = document.createElement("div");
    element.innerHTML = "<p>Additional Line</p><p>Additional Line</p><p>Additional Line</p>";
  document.querySelector(".main").appendChild(element);
});

document.querySelector(".button2").addEventListener("click", function(){
    var element = document.createElement("div");
    element.innerHTML = "<p>Additional Footer Line</p><p>Additional Footer Line</p><p>Additional Footer Line</p>";
  document.querySelector(".footer").appendChild(element);
});

body {
  background: @beige;
  color: @orange;
  display: table;
  width: 100%;
}

.main {
  height: 100%;
}

.footer {
  display: table-row;
  height:1px;
  background: @green;
  color: @beige;
}

/*====== Ignore section below ======*/

@orange: #BD4932;
@yellow: #FFD34E;
@green: #105B63;
@beige: #FFFAD5;


/* Basic Style*/
* { margin:0; padding:0;}
html, body { height: 100%; }
button { padding: 5px 10px;position:absolute;top: 20px;right:20px;display: block; -webkit-appearance: none;background: @orange; outline: none;  border: 2px solid #DB9E36; color: @yellow; border-radius: 10px; box-shadow: 0 2px 3px rgba(0,0,0,0.5);cursor: pointer;}
button:active {border-color: @beige; color:@beige;}

.button2 { top: 60px;}

<button class="button1">Add content to main body</button>
<button class="button2">Add content to footer</button>
<div class="main">This is the main body</div>
<div class="footer">This is a footer</div>