Соответствующий JS Fiddle http://jsfiddle.net/arosen/FMQtR/

Проблема

Мой HTML выглядит примерно так:

  

    A variable amount of text here.
  

  

    A less important variable amount of text here.
  

Блок #parent является фиксированной высотой и не может изменяться. Внутри него у меня есть как минимум два дочерних элемента div. В первом (или во многих) будет неизвестное количество текста, определяющее его высоту. Основываясь на содержимом первого, я хочу, чтобы последний занимал столько высоты, сколько осталось в родительском элементе, но не переполнялся.

Мой текущий пример CSS:

#parent {
    border: 1px solid #000;
    height: 150px;
    width: 150px;
}
  #one, #two {
    border: 1px dashed #333;
    height: auto;
    margin: 5px;
    padding: 5px;
    overflow: hidden;
  }

Мое текущее решение JS

function() {
  var $two = $('#two');
  var $parent = $('#two').parent()
  $parent.css('overflow', 'hidden');
  var heightDifference = $parent[0].scrollHeight - $parent.height();
  $two.css('height', $two.height() - heightDifference);
}

Мне интересно, есть ли решение этой проблемы в макете CSS или HTML, или я должен использовать решение JS, которое у меня есть в скрипке, которая запустить по нажатию последней кнопки.

РЕДАКТИРОВАТЬОбновлена ​​моя скрипта JS, так как текст неизменится один раз на странице, но в зависимости от информации, загруженной с сервера, не будет знать, сколько текста он будет иметь, пока страница не будет отображена .

РЕДАКТИРОВАТЬ 2Требуется поддержка только современных (и IE 9) браузеров.

РЕДАКТИРОВАТЬ 3Последний div должен иметьвысоту, поскольку он используется другими плагинами jQuery.