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