4

El problema que tengo es que cree el footer y adentro cree un div que contuviera a su vez a otros tres divs todo bien hasta ahí. Pero cuando creo otro div dentro del footer la página se expande hacía abajo osea que queda el color del footer y abajo un pedazo blanco, cuando quito el div que agregue vuelve a la normalidad, así que supuse que era eso pero estuve cambiándole las márgenes y demás cosas y ese pedazo blanco sigue ahí. Lo que busco es que el footer sea el que ocupe el final de la página sin ese pedazo blanco manteniendo el último div ya que en ese div metería términos y condiciones y demás. No sé si el editor de texto influya en esto, pero por si las moscas uso Atom.

#pie{
    text-align: center;
    background: #2E2626;
}
#pie h3{
    color: white;
    font-size: 20px;
}
#pie img{
    width: 100px;
}
#contenedor-logos{

}
#contenedor-logos .logo-p{
    padding-top: 2rem;
    width: 400px;
    display: inline-block;
    text-align: center;

}
#contenedor-logos h3{
    padding-top: 1rem;
    border-right: 1px solid black;

}
#contenedor-logos p{
    color: white;
    padding: 12px;
    margin-bottom: 100px;
}
#contenedor-logos a{
    text-decoration: none;
    font-size: 20px;
    color: #2374BB;
}
#contenedor-logos a:hover{
    color: #37658C;
    text-decoration: underline;
}
.a{
    background: black;
}
<footer id="pie">
        <div id="contenedor-logos">
        <div id="pagar" class="logo-p">
            <img src="../imagenes/logos/pagar.png" alt="">
            <h3>Paga con tarjeta o en efectivo</h3>
            <p>Paga con tarjeta o en efectivo,
             todo depende de tíasdasdasda
            sdasdasdasdasdasdasdasasdasdas
        dasdasdasdasdasdjeta o en efectijeta o en efecti <br><br><a href="">Saber más.</a></p>

        </div>
        <div class="logo-p">
            <img src="../imagenes/logos/proteger.png" alt="">
            <h3>Seguridad de princio a fin</h3>
            <p>Paga con tarjeta o en efectivo,
             todo depende de tíasdasdasda
            sdasdasdasdasdasdasdasasdasdas
        dasdasdasdasdasdjeta o en efectijeta o en efecti <br><br><a href="">Saber más</a></p>

        </div>
        <div class="logo-p">
            <img src="../imagenes/logos/descuento.png" alt="">
            <h3>Descuentos por tú ayuda</h3>
            <p>Paga con tarjeta o en efectivo,
             todo depende de tíasdasdasda
            sdasdasdasdasdasdasdasasdasdas
        dasdasdasdasdasdjeta o en efectijeta o en efecti <br><br><a href="">Saber más</a></p>

    </div>
    <div class="a">
    <p>asdasdasdasdas</p>
    </div>
        </div>
    </footer>

3 respuestas 3

5

Lo que pasa es que el último div que pones está dentro de #contenedor-logos, y como contiene un párrafo, este tiene un margen:

#contenedor-logos p {
  margin-bottom: 100px

Te aconsejo que coloques ese último div como hermano del #contenedor-logos, para que no genere problemas.

<div id="contenedor-logos">
  <!-- Elementos -->
</div>
<div class="ultimo">
</div>
3

De hecho el error lo provocaba la etiqueta p, como no es necesario podrías quitarlo y listo.

html{
   margin:0;
   padding:0;
}
#pie{
    text-align: center;
    background: #2E2626;
}
#pie h3{
    color: white;
    font-size: 20px;
}
#pie img{
    width: 100px;
}
#contenedor-logos{

}
#contenedor-logos .logo-p{
    padding-top: 2rem;
    width: 400px;
    display: inline-block;
    text-align: center;

}
#contenedor-logos h3{
    padding-top: 1rem;
    border-right: 1px solid black;

}
#contenedor-logos p{
    color: white;
    padding: 12px;
    margin-bottom: 100px;
}
#contenedor-logos a{
    text-decoration: none;
    font-size: 20px;
    color: #fff;
}
#contenedor-logos a:hover{
    color: #37658C;
    text-decoration: underline;
}
.a{
    background: black;
    color:#fff;
}
<footer id="pie">
        <div id="contenedor-logos">
        <div id="pagar" class="logo-p">
            <img src="../imagenes/logos/pagar.png" alt="">
            <h3>Paga con tarjeta o en efectivo</h3>
            <p>Paga con tarjeta o en efectivo,
             todo depende de tíasdasdasda
            sdasdasdasdasdasdasdasasdasdas
        dasdasdasdasdasdjeta o en efectijeta o en efecti <br><br><a href="">Saber más.</a></p>

        </div>
        <div class="logo-p">
            <img src="../imagenes/logos/proteger.png" alt="">
            <h3>Seguridad de princio a fin</h3>
            <p>Paga con tarjeta o en efectivo,
             todo depende de tíasdasdasda
            sdasdasdasdasdasdasdasasdasdas
        dasdasdasdasdasdjeta o en efectijeta o en efecti <br><br><a href="">Saber más</a></p>

        </div>
        <div class="logo-p">
            <img src="../imagenes/logos/descuento.png" alt="">
            <h3>Descuentos por tú ayuda</h3>
            <p>Paga con tarjeta o en efectivo,
             todo depende de tíasdasdasda
            sdasdasdasdasdasdasdasasdasdas
        dasdasdasdasdasdjeta o en efectijeta o en efecti <br><br><a href="">Saber más</a></p>

    </div>
    <div class="a">
    asdasdasdasdas
    </div>
        </div>
    </footer>

-1

Aportando a las respuestas anteriores es por el margen de la parte inferior como se puede ver en introducir la descripción de la imagen aquí

1
  • considera mirar Cómo responder y explicar bien tu respuesta...
    – gbianchi
    Commented el 28 jul. 2020 a las 17:57

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.