Сделать пункт автоматического заполнения оставшихся высота родительского

Question

в моем текущем проекте у меня есть следующая структура

<ol> 
    <li>...</li> 
    <li> 
     <section> 
      <h1>some title</h1> 
      <p>some text</p> 
     </section> 
    </li> 
    <li>...</li> 
</ol> 

ol имеет переменную, но набор высоты, которая заполняется по li (через height:100%;). Теперь я хочу, чтобы текст в абзаце заполнил оставшуюся высоту (через line-height и/или font-size).

Я исследовал это, но на самом деле не нашел решения для этого, только FitText.js, но он «предназначен только для гигантского текста дисплея», как говорится.

Так что я придумал решение JavaScript, вычисляя оставшуюся высоту с двух точек зрения (по умолчанию line-height: 1em и line-height: 0em) и рассчитать необходимый line-height так остающегося высота 0 (по основнымам математики, интерполяционной функции y = a*x + b, где это y равным оставшаяся высота).

var outerHeight = $("section").innerHeight(), 
    h1Height = $("section").children("h1").first().outerHeight(), 
    pHeight = $("section").children("p").first().outerHeight(); 

var defaultHeight, a, b, x; 

defaultHeight = outerHeight - (h1Height + pHeight); 
$("section").children("p").first().css("line-height", "0em"); 
b = outerHeight - (h1Height + $("section").children("p").first().outerHeight()); 
a = defaultHeight - b; 
x = -b/a; 
$("section").children("p").first().css("line-height", x+"em"); 

jsfiddle here

Наконец мой вопрос: Можно ли добиться этого в лучшую сторону (чистый CSS было бы удивительным, но я сомневаюсь, что)? Если нет, какие события могут произойти, в которых я должен был пересчитать (например, изменение размера браузера)?

Также хотел бы, чтобы текст заполнил раздел до максимальной степени - в настоящее время последней строки может создать небольшую видимую область между символами и нижней частью раздела.

Answer 1

Это выглядело интересно для меня, поэтому я подумал, что могу взломать его. Вот FIDDLE, который может дать вам несколько новых идей.

1. Я включил все, чтобы дивы (не знаю, почему, может быть, это только у меня)

2. я сделал предположение, что название будет фиксированный размер, и текст будет распределен по размеру большой div минус размер названия.

3. Затем простое разделение общего количества и начального размера текста.

Очевидно, что это не будет работать в экстремальных (три слова или текст книги длиной.

Я оставил предупреждение в только для шоу, очевидно, вы можете удалить их или комментировать их.

JS

var outerheight = $(".oldiv").innerHeight(); 
var titleheight = $(".oldiv div:first-child").outerHeight(); 
var textheight = $(".oldiv div:last-child").outerHeight(); 
var heighttodistribute = outerheight - titleheight; 

alert(outerheight + '-' + titleheight + '-' + textheight + '-' + heighttodistribute); 

var newlineheight = heighttodistribute/textheight; 

alert(newlineheight); 


$('.oldiv div:last-child').css('line-height', newlineheight);