调整窗口大小

时间:2017-09-22 20:10:29

标签: html css html5 css3

我几天前问了一个关于在调整浏览器大小时重新调整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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

你有&#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;
&#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;
&#13;
&#13;