html - 在调整窗口大小时调整多个 div 的大小

Question

几天前我问了一个关于在调整浏览器大小时调整 div 大小的问题，以便它在桌面和移动设备上看起来不错。但是现在我有一个扩展的问题。我有 2 个 div，一个在另一个下面，底部页脚 div 在调整浏览器大小时调整大小。可以在我之前的帖子中找到工作解决方案:Resize div on resizing window

但是这里的问题，我在上面又加了一个div。在调整浏览器窗口大小时，div 不会相互堆叠。它们在桌面的完整窗口中运行良好。如果您有任何建议，或者如果您想修改示例代码，我们将不胜感激 - 那太好了!

.info-banner {
  position: fixed;
  width: 100%;
  font-family: Arial, sans-serif;
  font-size: 24px;
  background: #000000;
  color: #FFFFFF;
  text-align: center;
  bottom: 30px;
  left: 0%;
  opacity: 0.8;
}

.info-banner a {
  color: #FFFFFF;
  text-decoration: none;
}

.info-banner a:hover {
  color: #aaa;
}

.footer-box {
  position: fixed;
  font-family: Arial, sans-serif;
  color: #FFFFFF;
  background-color: #000000;
  font-size: 11px;
  width: 100%;
  opacity: 0.8;
  z-index: 50;
  bottom: 0px;
  left: 0px;
}

.footer-box h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  text-align: center;
  line-height: 30px;
  font-weight: normal;
  font-family: Arial, sans-serif;
  color: #A9A9A9;
}

.footer-box a {
  text-decoration: none;
  outline: none;
  color: #A9A9A9;
}

.footer-box a:hover {
  text-decoration: underline;
}

<div id="contact-footer-merged">
  <div id="contact-banner" class="info-banner">
    <div>HEADER</div>
    <div>SUB-HEADER</div>
    <div>SUB-SUB-HEADER</div>
  </div>
  <div class="footer-box">
    <h2>
      <a href="/link/">LINK</a> |
      <a href="/link/">LINK</a> |
      <a href="/link/">LINK</a> |
      <a href="/link/">LINK</a> |
      <a href="/link/">LINK</a> |
      <a href="/link/">LINK</a> |
      <a href="/link/">LINK</a>
    </h2>
  </div>
</div>
</div>

Answer 1

您已将“posititon:static”分配给“.footer-box”和“#contact-banner”元素。 '#contact-banner' 元素的底部位置为 30 像素，因此当 '.footer-box' 列表元素堆叠时，它会增加该元素的高度。一旦“.footer-box”元素的高度大于 30 像素，它将与“#contact-banner”元素重叠。

为了解决这个问题，我刚刚从这两个元素中删除了 position:static 并将其添加到“#contact-footer-merged”包装器中。

#contact-footer-merged {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  width:100%;
}
.info-banner {
  font-family: Arial, sans-serif;
  font-size: 24px;
  background: #000000;
  color: #FFFFFF;
  text-align: center;
  opacity: 0.8;
}

.info-banner a {
  color: #FFFFFF;
  text-decoration: none;
}

.info-banner a:hover {
  color: #aaa;
}

.footer-box {
  font-family: Arial, sans-serif;
  color: #FFFFFF;
  background-color: #000000;
  font-size: 11px;
  opacity: 0.8;
  z-index: 50;
}

.footer-box h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  text-align: center;
  line-height: 30px;
  font-weight: normal;
  font-family: Arial, sans-serif;
  color: #A9A9A9;
}

.footer-box a {
  text-decoration: none;
  outline: none;
  color: #A9A9A9;
}

.footer-box a:hover {
  text-decoration: underline;
}

<div id="contact-footer-merged">
  <div id="contact-banner" class="info-banner">
    <div>HEADER</div>
    <div>SUB-HEADER</div>
    <div>SUB-SUB-HEADER</div>
  </div>
  <div class="footer-box">
    <h2>
      <a href="/link/">LINK</a> |
      <a href="/link/">LINK</a> |
      <a href="/link/">LINK</a> |
      <a href="/link/">LINK</a> |
      <a href="/link/">LINK</a> |
      <a href="/link/">LINK</a> |
      <a href="/link/">LINK</a>
    </h2>
  </div>
</div>
</div>