Как правильно задать параметры заголовку блока?

Question

[sergey]

Собственно есть несколько блоков с контентом, высота блоков hight: auto, но вот столкнулся с проблемой: если заголовок h4 включает в себя больше 2 слов, соответственно слетает в нижнюю строчку и тем самым удленяет блок.
На скрине видно:
Как это правильно обыграть, не задавая фиксированной высоты блоку?
Вот как задан заголовок h4

h4{
      color: $heading-color;
      font-size: 26px;
      line-height: 30px;
      margin-bottom: 20px;
    }
    h4::before {
      content: "";
      margin: 10px 15px 10px;
      display: inline-block;
      width: 30px;
      border-bottom: 3px solid $stack-color;
    }

Comments

[Aslan]

Используйте каскад, намного удобнее

Answer 1

[Александр]

здесь или устанавливать height для блока с заголовком
с учетом того что может быть две строки

или скриптом пробегаться по заголовкам
вычислять максимальную высоту и потом присваивать всем эту высоту

Answer 2

[Алексей]

Я бы предложил использовать джаваскрипт, отлавливаешь высоту всех блоков и задаешь всем по максимальной и делаешь например FadeIn их. Так же сделать отступ слева у заголовка, чтобы при переносе слова, оно было на одном вертикальном уровне с заглавной буквой. Кнопку "Смотреть подробнее" пришпандориваешь к нижней части блока, чтобы они все были на одном горизонтальном уровне вне зависимости от высоты.

Если все заголовки уже придуманы и они влезают целиком или по словам, то ок, если же нет, то я бы посоветовал их продумать, т.к. длинное слово может просто не влезть и придется либо менять шрифт, либо растягивать сами блоки.

Есть еще вариант, перенести заголовок над картинкой в диве с фиксированной высотой в которую гарантированно влезут все заголовки и у всех блоков будет одинаковый футер ввиде картинка+ссылка(смотреть подробнее).