Динамический межстрочный интервал

#html #css

Добрый день! Есть элемент с заранее известной высотой, но не известным текстом внутри.
Необходимо динамически рассчитывать межстрочный интервал для текста, чтобы заполнить
весь элемент по высоте. Каким образом это делается ? 
Пример кода:



.table_otvod {
  font-size: 14px;
  line-height: 1.5;
  border: none; 
  border-spacing: 20px;
  text-align: center;
  height:320px;
  width:100%;
}

.table_otvod td{
	 background-color: #E8E8E8;
  	width:33.33%
}

.table_otvod tr{
vertical-align: top;
}

.table_otvod ul{
  text-align: left;
  list-style-image: url(MyURL);
  list-style-position: inside;
  padding-left: 0;
}
.table_otvod span{
padding-left: 20px;

}

  

  
  
Продукт 
    

      
Текст 1
      
Очень длинный текст в несколько строк 11111
      
Текст 1
      
Текст 1
    
  
    
    

    
    
Сервис
    

      
Очень длинный текст в несколько строк 11111
      
Очень длинный текст в несколько строк 11111

    
  
    
    
    

    
        
Условия
    

      
Чуть короче текст213213213213
      
Чуть короче текст
      
Чуть короче текст
      
Чуть короче текст
    
  
    
    
  




    

Ответы

Ответ 1

1 шаг. Посчитать количество строк в тексте.
Делается этот так:
Выводим текст в обычный div без фиксированной высоты и берём его высоту (H).
Высота конкретной строчки нам известна (lineHeight).
На основе этих данных расчитываем количество строк = высота блока / высоту строчки.

stringNumber = H / lineHeight.


2 шаг. Рассчитываем новую высоту строчки для заполнения блока.
Высоту блока которую нужно получить (BH) делим на количество строчек (stringNumber)

newLineHeight = BH / stringNumber;




Реализация алгоритма  

В данном примере необходимую высоту задаю через кастомный атрибут myHeight.
Алгоритм сам находит все блоки с классом fill и на основе заданого атрибута рассчитывает
их параметры.



var els = document.getElementsByClassName("fill");

for (var el of els) {
  MakeFill(el);
}

function GetStringsNumber(el) {
  var height = el.clientHeight;
  var style = window.getComputedStyle(el);
  var lineHeightStr = style.getPropertyValue('line-height');
  var lineHeight = +lineHeightStr.substring(0,lineHeightStr.length-2);
  var linesNumber = height / lineHeight;
  return linesNumber;
}

function MakeFill(el) {
  var height = +el.getAttribute("myHeight");
  var stringNumber = GetStringsNumber(el);
  var lineHeight = height / stringNumber;
  el.style.lineHeight = lineHeight + "px";
}
.fill {
  width: 500px;
  font-size: 16px;
  line-height: 16px;
  border: 1px solid green;
  margin-bottom:15px;
}

  Привет привет привет привет привет привет привет привет привет привет привет привет
привет привет привет привет привет привет привет привет привет



  Привет привет привет привет привет привет привет привет привет привет привет привет
привет привет привет



  Привет привет привет привет привет привет привет привет привет привет привет привет
привет привет привет привет привет привет привет привет привет





Кроме того для реального кода необходимо будет ещё учесть padding.


Ответ 2

Задача легко решается с помощью display: flex, тк он заполняет все свое "главное
направление"(flex-direction), и если оно будут вертикальным (flex-direction: row),
то блок будет распространятся на всю высоту, например:


.items {
display: flex;
justify-content: space-around;
border: 1px solid #ccc;
height:320px;
}
.item {
flex-grow: 1;
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid #222;
}
.item p {
border: 1px solid #921;
}


	
Header
	
12312
3123
	
123
	
123


	
Header
	
123
	
12222
3333
	
123


	
Header
	
123
	
123
	
12222
33333