相对于具有响应内容的固定 div 定位 div

Question

我有一个似乎无法解决的棘手问题。我对编码比较陌生，所以请多多包涵，因为我会尽力彻底解释我的问题。另外，我确定我的代码非常规并且可能不正确！随意对我大喊大叫，我会做出适当的改变。提前谢谢大家！

在我的网站上，我有一个固定的页脚和一个带有响应内容的固定页眉。我希望我的网站中间的内容（div id="color"）完美地定位在我的页眉和页脚上（我在页眉和页脚上设置了 margin-bottom 和 margin-top 以包括 10px “颜色”的上方和下方）。用我的页脚很容易做到这一点，因为它没有任何响应。包括边距、内边距和内容的高度，我的页脚正好是 37 像素，所以我将“颜色”的边距底部设置为 37 像素，效果很好。我的问题是我的标题。它具有与页脚相同的 37 像素内容，但对于纵向设备，它还有一个宽度为“calc(100% - 20px)”的图像，对于横向设备，它的宽度为 20%方向。因此，标题会根据查看设备的分辨率在高度方向上增长和缩小。计算我的“颜色”div 的 margin-top 以始终与我的标题（37px + 来自响应图像的任何高度）相匹配的最佳方法是什么？

这是我的 JSFiddle 的链接：https://jsfiddle.net/ujgsrL8b/19/

我无法将图像嵌入到 JSFiddle 中，但我希望所有提供的代码仍然可以解决这个问题。如果有帮助，我的图片是 2828x596px。

另外，我阅读了几篇关于类似问题的文章，但没有一篇文章包含与我的问题类似的计算响应内容。我希望这是一个简单的解决方法！

再次感谢各位朋友，非常感谢！

<header id="header">
<div id="logo"> <a href="/" class="nonblocklink"><img alt="A logo." 
src="images/logo.png"></a> </div>
<div id="nav">
<ul>
<li id="projects">
PROJECTS
<ul>
<li id="one"> <a href="one/" class="blocklink" 
target="_self">ONE</a> </li>
</ul>
</li>
</ul>
</div>
</header>
<div id="color">
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
</div>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="info">
INFO
<ul>
<li id="instagram">
<a href="https://www.instagram.com/" target="_blank" 
class="blocklink">INSTAGRAM</a>
</li>
<li id="email">
<a href="mailto:mail@mail.com" 
class="blocklink">EMAIL</a>
</li>
</ul>
</li>
</ul>
</div>
</footer>

a.nonblocklink {
text-decoration: none;
color: inherit;
display: inline-block;
}

a.blocklink {
text-decoration: none;
color: inherit;
display: block;
}

#header {
background-color: white;
width: 100%;
position: fixed;
margin: 0px;
padding: 0px;
padding-top: 10px;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}

#logo img {
width: calc(100% - 20px);
}

#logo img:hover {
-webkit-filter: invert(100%) !important;
}

#nav {
width: 100%;
background-color: white;
}

#projects {
display: inline-block;
}

#nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}

#nav ul ul {
width: calc(100% - 20px);
list-style-type: none;
font-weight: normal;
display: none;
}

#nav ul li:hover>ul {
display: block;
position: absolute;
text-align: center;
margin: 0 auto;
padding-top: 10px;
left: 0;
right: 0;
}

#one {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}

#one:hover {
background-color: black;
color: white;
}

#footer {
width: 100%;
background-color: white;
position: fixed;
margin: 0px;
bottom: 0;
left: 0;
text-align: center;
z-index: 11;
}

#footer-nav {
width: 100%;
}

#info {
display: inline-block;
padding-top: 10px;
}

#footer-nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}

#footer-nav ul ul {
width: calc(100% - 20px);
list-style-type: none;
font-weight: normal;
display: none;
}

#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
padding-bottom: 0;
}

#email {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}

#email:hover {
background-color: black;
color: white;
}

#instagram {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}

#instagram:hover {
background-color: black;
color: white;
}

#color {
margin-top: 37px;
margin-bottom: 37px;
padding: 0px;
top: 0;
left: 0;
width: 100%;
align-content: center;
position: absolute;
}

@media screen and (orientation: landscape) {
#logo img {
    width: 20%;
}
#nav ul ul {
    width: 20%;
}
#footer-nav ul ul {
    width: 20%;
}
}

Answer 1

由于您使用的是纯 JS，我正在更新我的答案。

这适用于您提供的 JSFiddle：

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

只需将其添加到 JS 的底部即可。希望这会有所帮助。