<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>
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;}
View Compiled
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);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.