Impostazione dell'altezza dell'elemento nel layout reattivo?

Question

In generale, quale markup e CSS creeranno un elemento con un'altezza basata sulla percentuale in un design reattivo? How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap? mostra come creare due colonne altezza 100%, ma questo si rompe per altezze < 100%.

In particolare, ho un div sidebar con un elenco di elementi, che può essere breve (vuoto) o lungo (overflow: auto). Ma poiché nessun elemento genitore ha un'altezza fissa, height: 20%; non funziona. Come posso dare alla barra laterale un'altezza fluida mantenendo un design reattivo?

Answer 1

Hai provato la proprietà di blocco in linea con allineamento verticale: superiore? Di recente ho visto questo articolo che potrebbe aiutarti con il tuo problema. Normalmente l'altezza si ridimensiona semplicemente per adattarsi al contenuto, quindi non sono esattamente sicuro di ciò che stai cercando di realizzare. Date un'occhiata a questo articolo ... http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Answer 2

Di solito con un fondo di riempimento fluido sul contenitore padre risolve questo problema.

Maggiori informazioni possono essere trovate qui: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

aggiornamento: il js bin http://jsbin.com/obesuk/1/

markup:

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