Ändern der Größe von mehreren Divs beim Ändern der Größe von Fenstern

Question

Ich habe vor einigen Tagen eine Frage über die Größenänderung eines Div gestellt, als die Größe des Browsers geändert wurde, damit es auf dem Desktop und auf mobilen Geräten gut aussieht. Aber jetzt habe ich ein erweitertes Problem zum selben. Ich habe 2 divs untereinander und die untere Fußzeile Div Größe ändert sich bei der Größenänderung des Browsers. Die Arbeitslösung kann hier in meinem vorherigen Beitrag gefunden werden: Resize div on resizing window

Aber in dem Problem hier, fügte ich ein weiteres div oben drauf. Bei der Größenanpassung des Browserfensters werden die divs nicht übereinander gestapelt. Sie funktionieren gut auf einem vollen Fenster auf einem Desktop. Ich würde mich über Vorschläge freuen, die Sie haben könnten, oder wenn Sie den Beispielcode ändern möchten - das wäre großartig!

.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

Sie haben 'posititon: static' sowohl '.footer-box' zugeordnet und '' # contact-Banner '' Elemente. Das '# contact-banner' Element hat eine untere Position von 30px, wenn also die '.footer-box' Elemente auflistet, erhöht sich die Höhe dieses Elements. Sobald die Höhe des Elements ".footer-box" größer als 30px ist, überlappt es das Element # contact-banner.

Um dieses Problem zu lösen, habe ich einfach position:static von diesen beiden Elementen entfernt und es dem '# contact-footer-merged' Wrapper hinzugefügt.

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