Ustawianie wysokości elementu w elastycznym układzie?

Question

Ogólnie, jaki znacznik i CSS utworzy element o wysokości procentowej w responsywnym projekcie? How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap? pokazuje, jak utworzyć dwie kolumny o wysokości 100%, ale zrywa to dla wysokości < 100%.

W szczególności mam div paska bocznego z listą pozycji, które mogą być krótkie (puste) lub długie (overflow: auto). Ale ponieważ żadne elementy rodzica nie mają ustalonej wysokości, height: 20%; nie działa. Jak mogę ustawić pasek boczny na poziomie płynu, zachowując jednocześnie responsywny wygląd?

Answer 1

Czy próbowałeś właściwości wbudowanego bloku z vertical-align: top? Niedawno zobaczyłem ten artykuł, który może ci pomóc w rozwiązaniu problemu. Zwykle wysokość zmienia się po prostu tak, aby pasowała do treści, więc nie jestem do końca pewien, co próbujesz osiągnąć. Sprawdź ten artykuł ... http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Answer 2

Zwykle posiadanie dna wypełnienia płynem w pojemniku nadrzędnym rozwiązuje ten problem.

Więcej informacji można znaleźć tutaj: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

aktualizacja: na bin js 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; 
    }