¿Por qué la página se agranda cuando introdusco un div a footer?
Stack Overflow en español Asked on March 5, 2021
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 Answers
Aportando a las respuestas anteriores es por el margen de la parte inferior como se puede ver en 
Answered by asbel777 on March 5, 2021
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>Answered by Shassain on March 5, 2021
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>
Answered by Ronny Pumaricra on March 5, 2021
Add your own answers!
Ask a Question
Get help from others!
Recent Questions
- How can I transform graph image into a tikzpicture LaTeX code?
- How Do I Get The Ifruit App Off Of Gta 5 / Grand Theft Auto 5
- Iv’e designed a space elevator using a series of lasers. do you know anybody i could submit the designs too that could manufacture the concept and put it to use
- Need help finding a book. Female OP protagonist, magic
- Why is the WWF pending games (“Your turn”) area replaced w/ a column of “Bonus & Reward”gift boxes?
Recent Answers
- Peter Machado on Why fry rice before boiling?
- Joshua Engel on Why fry rice before boiling?
- Jon Church on Why fry rice before boiling?
- Lex on Does Google Analytics track 404 page responses as valid page views?
- haakon.io on Why fry rice before boiling?