Компонент Высота Height

Устанавливайте высоту элементов в зависимости от области просмотра или примените высоту другого элемента. Руководство. Применение.

Компонент UIkit 3 Высота предлагает три варианта установки высоты:

Применение

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

Класс Описание
.uk-height-1-1 Этот класс применяет высоту 100%.
Работает, только если родительский элемент имеет заданную высоту.
.uk-height-small Этот класс применяет высоту 150px.
.uk-height-max-small А этот установит максимальную высоту 150px.
.uk-height-medium Этот класс применяет высоту 300px.
.uk-height-max-medium А этот установит максимальную высоту 300px.
.uk-height-large Этот класс применяет высоту 450px.
.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>

Высота «Viewport»

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

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

Опция Значение По умолчанию Описание
offset-top Boolean false Вычитает верхнее смещение элемента из его высоты.
offset-bottom Boolean, Number, Pixel, CSS Selector 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="offset-bottom: 50px"></div> <!-- вычитает высоту снизу в пикселях -->

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

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

Вы можете просмотреть примеры в тестах для Height Viewport и Height Expand.

Высота «Match»

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

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

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

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

Высота «Match cards»

Высота : Соответствие цели

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

<div uk-grid uk-height-match="target: SELECTOR">...</div>
  • Заметив, что закуска была готова, полицеймейстер предложил гостям окончить вист после завтрака, и все пошли в ту комнату.
    Скоро все угомонились
    Они встретились взглядом и чутьем поняли друг друга.
    Таким образом
  • <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">Заметив, что закуска была готова, полицеймейстер предложил гостям окончить вист после завтрака, и все пошли в ту комнату.</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Скоро все угомонились</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Они встретились взглядом и чутьем поняли друг друга.</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Таким образом</div>
        </div>
    </div>
В данном примере высота одной ячейки в строке соответствует соседней высоте ячейки в этой же строке.

Высота «Match all»

Одинаковая высота всех ячеек

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

<div uk-grid uk-height-match="row: false">...</div>
  • В это время из дамских благовонных уст к нему устремилось множество намеков и вопросов, проникнутых насквозь тонкостию и любезностию.
    Видно, так уж бывает на свете.
    Каждая дама дала себе внутренний обет быть как можно очаровательней.
    По крайней мере.
  • <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">В это время из дамских благовонных уст к нему устремилось множество намеков и вопросов, проникнутых насквозь тонкостию и любезностию.</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Видно, так уж бывает на свете.</div>
        </div>
        <div class="uk-grid-margin uk-first-column">
            <div class="uk-card uk-card-default uk-card-body">Каждая дама дала себе внутренний обет быть как можно очаровательней.</div>
        </div>
        <div class="uk-grid-margin">
            <div class="uk-card uk-card-default uk-card-body">По крайней мере.</div>
        </div>
    </div>
В данном примере все ячейки имеют одинаковую высоту.

Параметры для атрибута

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

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

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

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

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

UIkit.heightMatch(element, options);