Установка высоты элемента в ответном макете?

Как правило, какая разметка и CSS создадут элемент с процентной высотой в отзывчивом дизайне? Как построить компоновку с двумя столбцами (Fixed - Fluid) с помощью Twitter Bootstrap? показывает, как создать два столбца высотой 100%, но это разрывается на высоты < 100%.

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

Ответы

Ответ 1

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

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

update: on js bin 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;
  }

Ответ 2

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