0

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;
}
1
  • Tu código es insuficiente para ver el problema. Además no se entiende, si footer es de height: 23rem, porque no le subes el height y ya???
    – Yussef
    Commented el 26 sept. 2022 a las 6:37

1 respuesta 1

1

Lo que se puede hacer para lograr lo que quieres es usar la propiedad min-height , esto permite que tu elemento tenga una altura definida pero aumente con respecto al contenido.

.footer_bg {
  background-color: #4E7279;
  min-height: 23rem;//Reemplaza height por min-height
  padding: 2rem 0 3rem;
}

En este Enlace te dejo mas documentacion de la propiedad min-heigth.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.