Configuración de la altura del elemento en el diseño receptivo?

Question

En general, ¿qué marcado y CSS crearán un elemento con una altura basada en porcentaje en un diseño receptivo? How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap? muestra cómo crear dos columnas de altura del 100%, pero esto se rompe para alturas < 100%.

Específicamente, tengo una div de barra lateral con una lista de elementos, que pueden ser cortos (vacíos) o largos (overflow: auto). Pero como ningún elemento padre tiene una altura fija, height: 20%; no funciona. ¿Cómo puedo darle a la barra lateral una altura fluida mientras mantengo un diseño receptivo?

Answer 1

¿Has probado la propiedad de bloque en línea con vertical-align: top? Hace poco vi este artículo que puede ayudarte con tu problema. Normalmente, la altura cambia de tamaño para ajustarse al contenido, por lo que no estoy seguro de lo que intentas lograr. Verifique este artículo ... http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Answer 2

Por lo general, tener un acolchado fluido en el contenedor principal resuelve este problema.

Más información se puede encontrar aquí: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

actualización de bin js http://jsbin.com/obesuk/1/

marcado:

<div class="obj-wrapper"> 
<div class="content">content</div> 
</div> 

css:

.obj-wrapper { 
    position:relative; 
    width:50%; 
    padding-bottom:40%; 
    height:0; 
    overflow:hidden; 
    } 
    .content { 
    position:absolute; 
    width:100%; 
    height:100%; 
    background:red; 
    }