Question

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

但是在这里的问题中，我在其上添加了另一个div。在调整浏览器窗口大小时，div不会叠加在一起。它们在桌面上的完整窗口上工作正常。非常感谢您提出的任何建议，或者您想要修改示例代码 - 这将是非常棒的！

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

你有＆＃39; posititon：static＆＃39;分配给＆＃39; .footer-box＆＃39;和＆＃39;＃contact-banner＆＃39;＆＃39;元素。＆＃39; #contanet-banner＆＃39;元素的底部位置为30px，因此当＆＃39; .footer-box＆＃39;列表元素堆栈增加了该元素的高度。一旦＆＃39; .footer-box＆＃39;的高度。元素大于30px，它将重叠＆＃39; #contanet-banner＆＃39;元件。

要解决此问题，我只需从这两个元素中删除position:static，然后将其添加到＆＃39; #contact-footer-merged＆＃39;包装

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

调整窗口大小

1 个答案: