Компонент Высота 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);