Стили футера в зависимости от высоты блока

let cntnt = document.getElementById('content');  
cntnt.addEventListener('click', function () { 
  this.innerHTML += '<p>параграф</p>';  
}); 

html, 
body { 
  margin: 0; 
  padding: 0; 
} 
 
#page { 
  height: 100vh;  
  display: flex; 
  flex-direction: column;  
  font: 16px sans-serif;  
  color: #fff;  
} 
 
#page > div,  
#content > p { 
  padding: 10px;  
  text-align: center;  
} 
 
#page > div { flex 0 0 auto; } 
 
#content { background-color: #44a; } 
 
#footer { 
  margin-top: auto;  
  background-color: #4a4; 
}

<div id="page"> 
  <div id="content">кликайте по этому блоку<br>для увеличения его высоты</div> 
  <div id="footer">футер</div> 
</div>