サイズ変更ウィンドウで複数のdivのサイズを変更する

Question

ブラウザやブラウザのサイズを変更したときに、しかし、今私は同じ問題に長期的な問題があります。私はもう一方の下に2つのdivsを持っており、下のフッター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：静的' 両方 '.footerボックス' と '' ＃接点-バナー '' 要素に割り当てられました。 '＃contact-banner'要素の下部位置は30pxです。したがって、 '.footer-box'リスト要素がスタックすると、その要素の高さが増加します。 '.footer-box'要素の高さが30pxより大きくなると、 '＃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>