使用display：table的CSS动态粘页脚-为什么起作用？

Question

我一直在阅读有关表布局here的信息，并且试图了解this dynamic sticky footer为何起作用。我的目的是真正了解表格布局的工作方式。关于此解决方案，我有一些特定的问题：

1. 为什么.main的div有height: 100%，但显示时却不能覆盖网页的整个高度？
2. 为什么只为display: table-row;的div而不是.footer的{​​{1}}？
3. 这段代码如何使.main div表现为动态粘性页脚！？

有一些Java脚本，但仅用于按钮。所有动态行为都只是CSS和HTML代码。

代码如下：

.footer

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