Me había estado estrujando el cerebro creando una alineación vertical en CSS usando lo siguiente
.base{
background-color:green;
width:200px;
height:200px;
overflow:auto;
position:relative;
}
.vert-align{
padding-top:50%;
height:50%;
}
<!-- and used the following div structure. -->
<div class="base">
<div class="vert-align">
Content Here
</div>
</div>
Si bien esto parecía funcionar para este caso, me sorprendió que cuando aumentaba o disminuía el ancho de mi div base, la alineación vertical se rompería. Esperaba que cuando estableciera la propiedad padding-top, tomaría el relleno como un porcentaje de la altura del contenedor principal, que es la base en nuestro caso, pero el valor anterior del 50 por ciento se calcula como un porcentaje del anchura. :(
¿Hay alguna manera de establecer el relleno y / o el margen como un porcentaje de la altura, sin recurrir al uso de JavaScript?
top
funciona muy bien para cambiar el tamaño según la altura del navegador / ventana. ¿Qué tal tener un div debajo de ese div? ¿Cómo puedeclear
el segundo div estar debajo del div que se desplaza hacia abajo por untop:50%
??