Высота установочного элемента в ответном макете?

Question

Как правило, какая разметка и CSS создадут элемент с процентной высотой в отзывчивом дизайне? How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap? показывает, как создать две столы высотой 100%, но это разрывается на высоты < 100%.

В частности, у меня есть боковая панель div со списком предметов, которые могут быть короткими (пустыми) или длинными (overflow: auto). Но поскольку ни один из родительских элементов не имеет фиксированной высоты, height: 20%; не работает. Как я могу дать боковой панели высоту жидкости, сохраняя при этом отзывчивый дизайн?

Answer 1

Вы пробовали свойство inline-block с вертикальным выравниванием: сверху? Недавно я увидел эту статью, которая может помочь вам в решении вашей проблемы. Обычно высота просто изменяет размер, чтобы соответствовать содержимому, поэтому я не совсем уверен, что вы пытаетесь выполнить. Проверьте эту статью ... http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Answer 2

Обычно наличие жидкой подкладки на родительском контейнере решает эту проблему.

Более подробную информацию можно найти здесь: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

обновление: на Js бен http://jsbin.com/obesuk/1/

разметки:

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