css - toda - Establecer la altura del elemento en el diseño de respuesta?

div que ocupe todo el alto de la pantalla

Question

En general, ¿qué marcado y CSS crearán un elemento con una altura basada en porcentaje en un diseño receptivo? ¿Cómo construir un diseño de 2 columnas (Fixed - Fluid) con Twitter Bootstrap? muestra cómo crear dos columnas de 100% de altura, 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 debido a que 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: arriba? 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. Mira este artículo ... http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Answer 2

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

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

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

margen :

<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;
  }