¿Cómo hacer que el div se adhiera a la parte inferior del div principal?
¿Alguien podría ayudarme a hacer que me div#bottomquede en la parte inferior del elemento principal div, de modo que cuando haga clic en el botón interior me permita mostrar elementos desde div#listarriba?
Preferiblemente me gustaría evitar JS, jQuery, etc. o al menos en el diseño:
<div class="wrapper">
<div id="top">
<ul>
...
...
</ul>
</div>
<div class="bottom">
<div id="button">
<div id="list">
<ul>
<li>elem 1</li>
<li>elem 2</li>
</ul>
</div>
</div>
</div>
</div>
.wrapper{position:relative;}
.bottom{position:absolute; bottom:0;}
Editado
Gracias a @centr0 y @TJ Crowder, la clave que debemos entender aquí es que " position:relativecontendrá .wrapper" cualquier elemento que tenga position:absolute. Es como declarar límites para .bottom. Sin position:relativeadentro .wrapper, .bottomsaldría de eso.div
Me encuentro con un problema similar. La solución de Val es buena, pero tiene un problema: el div interno se adherirá al fondo, pero no afectará la altura del div principal, gracias a su "posición: absoluta;" (está fuera del flujo de diseño de página).
Así que aquí está mi solución ampliada para cualquiera que tenga un problema similar:
.wrapper {
position: relative;
padding-bottom: 50px;
}
.wrapper .bottom {
position: absolute;
bottom: 0px;
height: 50px;
}
Como puede ver, configuré la altura del .bottom y del padding-bottom del envoltorio. La desventaja es que la altura del pie de página está en dos lugares. Pero creo que es una buena solución, por ejemplo, para la lista de productos, donde hay una altura fija en el pie de página del cuadro (como el precio, etc.).
Recuerde que cada vez que establezca "posición: absoluta", el elemento se posicionará absolutamente contra el primer div principal, que tiene el atributo de posición establecido. O, eventualmente, contra la propia página.
