Как сделать всё на одном уровне без задания min-height?

Question

[olya_097]

Как сделать всё на одном уровне без задания min-height?
Заголовку и абзацу

https://codepen.io/Olya097/pen/zYOeZrx

Comments

[Ankhena]

На одном уровне можно сделать кнопки.
Все остальное либо гридами либо js.

p.s. для каких браузеров вы верстаете, если пишете столько префиксов, да еще и руками?

[olya_097]

Ankhena, есть пример? а с чего Вы взяли что я пишу их руками? у меня для галпа автопрефиксер

[Ankhena]

olya_097, пример кнопок на одном уровне? Родителю флекс колонками, кнопке margin-top auto.

а с чего Вы взяли что я пишу их руками?

В кодепен они как-то попали, а туда обычно пишут исходники.

[olya_097]

Ankhena, пример на гридах или js
или хотя бы вкратце описать что нужно
с js особо интересует

[Ankhena]

olya_097, гридами - нужно менять разметку, что не очень хорошо.
На js - equalheights.js, в оригинале он на JQ. Суть проста: найти наибольшую высоту и задать её всем элементам.

[Сергей delphinpro]

olya_097,

в кодпене есть автопрефиксер

По вопросу, наверное, только так:

[olya_097]

Сергей delphinpro, спасибо
правда у вас кнопка подробнее не снизу

+ в чем суть padding-bottom: percentage(3/4); ?

[Сергей delphinpro]

olya_097, обновил пен для кнопки

суть в задании одинакового размера картинкам с сохранением aspect ratio ( если посмотрите в код, то там видно что картинки на самом деле разной высоты)

[olya_097]

Сергей delphinpro,а можно к примеру задать не padding-bottom: percentage(3/4);
а padding-bottom: 60%
результат тот же

[Сергей delphinpro]

olya_097,
percentage() - это scss функция, возвращающая процент
делает вот это:

@return 3 / 4 * 100%;

В данном случае она возвращает значение 75%

Но запись percentage(3/4) удобнее, так как отображает соотношение сторон 3:4
Если, допустим, нужен формат widescreen, то не нужно вспоминать число 62,5%, а просто написать percentage(10/16).
Или померить картинку в макете, пусть она 320х480 пикселей - и написать
percentage(320/480)

[olya_097]

Сергей delphinpro, ага

а можете еще это описать?
почему $lines именно 3?
и зачем там оверлоу?
убираю - вроде все также

$lines: 3;
.blog__title {
  font-size:20px;
  line-height: 1.2;
  height: (20px * 1.2) * $lines;
  
  overflow: hidden;

[Сергей delphinpro]

olya_097, 3 строчки текста, остальное режется в многоточие (только в вебкитах, в других просто обрезается)

Answer 1

[Дмитрий Христоев]

brm.io/jquery-match-height

Answer 2

[Сергей Абдулов]

может в процентах задать ширину!