Positioning A Div Relative To A Fixed Div With Responsive Content

I have a tricky issue that I cannot seem to beat. I am relatively new to coding so please bear with me as I try my best to thoroughly explain my issue. Also, I'm sure my code is ve

Solution 1:

As you are using plain JS, I am updating my answer.

This worked on the JSFiddle you provided:

window.addEventListener('load', function() {
  var headerHeight = document.getElementById('header').clientHeight;
  document.getElementById("color").style.paddingTop = headerHeight + "px";
  var footerHeight = document.getElementById('footer').clientHeight;
  document.getElementById("color").style.paddingBottom = footerHeight + "px";
}, true);

window.addEventListener('resize', function() {
  var headerHeight = document.getElementById('header').clientHeight;
  document.getElementById("color").style.paddingTop = headerHeight + "px";
  var footerHeight = document.getElementById('footer').clientHeight;
  document.getElementById("color").style.paddingBottom = footerHeight + "px";
}, true);

Just add this at the bottom of your JS. Hope this helps.