Высота

С помощью модификаторов высоты вы легко можете изменить высоту элемента. В SIMAI Framework вы можете задавать высоту относительно родительского элемента, экрана или размера шрифта html.

Высота относительно родителя

Адаптивный модификатор. Позволяет изменять высоту относительно родительского элемента. Использование: .h{контрольная точка}-{размер}

  • Контрольная точка. Необязательный параметр. Изменяет размер шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Размер. Обязательный параметр. Указывает размер относительно родительского элемента. Принимает значения:
    • 0 – 0%
    • 25 – 25%
    • 50 – 50%
    • 75 – 75%
    • 100 – 100%
.h-25
.h-50
.h-75
.h-100
<div class="bg-theme-1 hr-5 d-flex">
  <div class="p-1 mb-1 bg-theme-7 w-25 h-25"><code>.h-25</code></div>
  <div class="p-1 mb-1 bg-theme-7 w-25 h-50"><code>.h-50</code></div>
  <div class="p-1 mb-1 bg-theme-7 w-25 h-75"><code>.h-75</code></div>
  <div class="p-1 mb-1 bg-theme-7 w-25 h-100"><code>.h-100</code></div>
</div>

Высота относительно окна

Адаптивный модификатор. Позволяет изменять высоту относительно окна. Использование: .hv{контрольная точка}-{размер}

  • Контрольная точка. Необязательный параметр. Изменяет размер шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Размер. Обязательный параметр. Указывает размер относительно родительского элемента. Принимает значения:
    • 0 – 0vh
    • 25 – 25vh
    • 50 – 50vh
    • 75 – 75vh
    • 100 – 100vh
<div class="hv-25"></div>
<div class="hv-50"></div>
<div class="hv-75"></div>
<div class="hv-100"></div>

Пример использования в адаптивном режиме:

<div class="hv-100 hv-lg-75 hv-xl-50"></div>

Абсолютная высота

Адаптивны модификатор. С помощью модификатора .hr вы можете устанавливать размер объекта относительно размера шрифта html. Использование: .hr{контрольная точка}-{размер}

  • Контрольная точка. Необязательный параметр. Изменяет размер шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Размер. Обязательный параметр. Указывает размер относительно размера шрифта страницы (html). Принимает значения:
    • 1 – 1 rem
    • 2 – 2 rem
    • 3 – 4 rem
    • 4 – 8 rem
    • 5 – 16 rem
    • 6 – 32 rem
.hr-1
.hr-2
.hr-3
.hr-4
.hr-5
<div class="bg-theme-1 d-flex">
  <div class="p-1 mb-1 bg-theme-7 w-20 hr-1"><code>.hr-1</code></div>
  <div class="p-1 mb-1 bg-theme-7 w-20 hr-2"><code>.hr-2</code></div>
  <div class="p-1 mb-1 bg-theme-7 w-20 hr-3"><code>.hr-3</code></div>
  <div class="p-1 mb-1 bg-theme-7 w-20 hr-4"><code>.hr-4</code></div>
  <div class="p-1 mb-1 bg-theme-7 w-20 hr-5"><code>.hr-5</code></div>
</div>

Пример использования в адаптивном режиме:

<div class="hr-4 hr-lg-5"></div>