Estoy realizando un footer con una altura definida. Sin embargo, el contenido dentro de este footer no "cabe" dada una altura establecida (height: 23rem;
) ¿Cómo podría "forzar" a que entre a la altura deseada ?
HTML:
<footer class="footer">
<div class="footer_bg">
<div class="footer_container">
<div class="footer-logo">
<img class="logo-footer" src="img/logo-nav.png" alt="Logo Footer">
</div>
<ul class="footer_links">
<li>
<a href="#services" class="footer_link">Servicios</a>
</li>
<li>
<a href="#contact" class="footer_link">Contacto</a>
</li>
</ul>
<div class="footer_socials">
<a href="https://www.facebook.com/casade.restauracion.1428" target="_blank" class="footer_social">
<i class="uil uil-facebook"></i>
</a>
<a href="" target="_blank" class="footer_social">
<i class="uil uil-whatsapp"></i>
</a>
</div>
</div>
</div>
</footer>
CSS:
.footer_bg {
background-color: #4E7279;
height: 23rem;
padding: 2rem 0 3rem;
}
.footer-logo img {
display: flex;
justify-content: center;
align-items: center;
width: 18rem;
margin: auto;
}
.footer_links li {
padding-top: 1rem;
font-size: 2rem;
}
.footer_socials {
display: flex;
justify-content: center;
align-items: center;
font-size: 4rem;
gap: 7rem;
}