Высота

Определяйте высоту элементов в зависимости от области просмотра или сопоставляйте высоту различных элементов.

Компонент высоты UIkit предлагает три варианта установки высоты: универсальные классы, высота вьюпорта и JS-сопоставление высоты элементов.


Как использовать компонент Height в UIkit 3

UIkit предоставляет ряд полезных классов для изменения высоты элемента.

Класс Описание
.uk-height-1-1 Этот класс применяет высоту 100%. Это работает, только если родительский элемент имеет заданную высоту.
.uk-height-small
.uk-height-max-small
Эти классы применяют высоту или максимальную высоту 150px.
.uk-height-medium
.uk-height-max-medium
Эти классы применяют высоту или максимальную высоту 300px.
.uk-height-large
.uk-height-max-large
Эти классы применяют высоту или максимальную высоту 450px.
<div class="uk-height-small"></div>
  • Small
    Medium
    Large
  • <div class="uk-child-width-1-3@s" uk-grid>
        <div>
            <div class="uk-height-small uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">Small</div>
        </div>
        <div>
            <div class="uk-height-medium uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">Medium</div>
        </div>
        <div>
            <div class="uk-height-large uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">Large</div>
        </div>
    </div>

Высота вьюпорта (области просмотра)

Добавьте атрибут uk-height-viewport, чтобы создать контейнер, который заполняет высоту всего окна просмотра. Вы можете изменить поведение высоты, добавив опции offset-top, offset-bottom или expand к атрибуту. подробнее о конфигурации

Опция Значение По умолчанию Описание
offset-top Boolean false Вычитает верхнее смещение элемента от его высоты.
offset-bottom Boolean, Number, Pixel false Вычитает высоту (true) следующего элемента в процентах (Число), значение в пикселях (px), исходя из собственной высоты элемента или высоты отдельного элемента.
expand Boolean true Увеличивает высоту элемента, чтобы страница заполняла область просмотра.
min-height Number 0 Устанавливает минимальную высоту. Полезно, если все дочерние элементы абсолютно позиционированы.
<div uk-height-viewport></div>

<div uk-height-viewport="offset-top: true"></div>

<div uk-height-viewport="offset-bottom: 20"></div>

<div uk-height-viewport="expand: true"></div>

<div uk-height-viewport="min-height: 300"></div>

Примеры вариантов высоты вьюпорта можно посмотреть в разделе тестов тут и тут.


Сопоставление высоты

Можно задать всем дочерним элементам контейнера одинаковую высоту вне зависимости от их содержимого, например внутри сетки. Добавьте атрибут uk-height-match. Вы можете изменить поведение соответствия высоты, установив опции target или row в атрибут. Подробнее

Опция Значение По умолчанию Описание
target String > * Задать одинаковую высоту всем элементам с указанным селектором.
row Boolean true По умолчанию будут сопоставляться только элементы в одной строке. Например, когда столбцы сетки расширяются до 100%, их высоты больше не будут совпадать. Это имеет смысл, например, если они располагаются вертикально в более узких окнах просмотра.
<div uk-height-match>
    <div></div>
    <div></div>
</div>

target является параметром Основным, и его ключ может быть опущен, если это единственный параметр в значении атрибута.

<span uk-height-match=".my-class"></span>

Сопоставление карточек

Вы также можете нацеливать и сопоставлять определенные элементы внутри контейнера, например, карточки. Добавьте опцию target: SELECTOR В атрибут.

<div uk-grid uk-height-match="target: SELECTOR">...</div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem Ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Lorem Ipsum
  • <div class="uk-child-width-1-2@s" uk-grid uk-height-match="target: > div > .uk-card">
        <div>
            <div class="uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Lorem Ipsum</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Lorem Ipsum</div>
        </div>
    </div>

Сопоставление всего

Если ваша сетка состоит из нескольких строк, сопоставляются только столбцы сетки в одной строке. Чтобы сопоставить столбцы сетки во всех строках, просто добавьте опцию row: false в атрибут.

<div uk-grid uk-height-match="row: false">...</div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem Ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Lorem Ipsum
  • <div class="uk-child-width-1-2@s" uk-grid uk-height-match="target: > div > .uk-card; row: false">
        <div class="uk-first-column">
            <div class="uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Lorem Ipsum</div>
        </div>
        <div class="uk-grid-margin uk-first-column">
            <div class="uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
        <div class="uk-grid-margin">
            <div class="uk-card uk-card-default uk-card-body">Lorem Ipsum</div>
        </div>
    </div>

Опции компонента

В таблице ниже перечислены доступные настройки атрибута uk-height-match. Подробнее о настройках

Опция Значение По умолчанию Описание
target CSS selector > * Элементы, которые должны соответствовать. По умолчанию это все дочерние элементы.
row Boolean true Если ваши цели переносятся в несколько строк, сопоставляются только столбцы сетки в пределах одной строки.

JavaScript

Подробнее о компонентах JavaScript.

Инициализация

UIkit.heightMatch(element, options);