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

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

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

Height: Применение

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

Класс Описание
.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>

Высота «Viewport»

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

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

Опция Значение По умолчанию Описание
offset-top Boolean, CSS Selector false Вычитает верхнее смещение элемента (true) или заданного элемента (CSS Selector) из его высоты.
offset-bottom Boolean, Number, Pixel, CSS Selector false Вычитает высоту (true) дочернего элемента, который следует непосредственно за элементом, заданное процентное (Number), пиксельное (px) значение из собственной высоты элемента или заданной высоты элемента.
expand Boolean false Увеличивает высоту элемента, заполняя недостающее пространство в области просмотра.
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>

В данном примере все ячейки имеют одинаковую высоту.

Высота «Placeholder»

Высота для элемента-заполнителя

Чтобы установить высоту для элемента-заполнителя, добавьте атрибут uk-height-placeholder: SELECTOR, в котором селектор нацеливается на элемент с необходимой высотой.

<div id="my-target-id">
    …
</div>
<div uk-height-placeholder="#my-target-id"></div>

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

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.

<div class="uk-position-relative">

    <div class="my-header-absolute uk-position-top">
        <nav class="uk-navbar-container uk-navbar-transparent" uk-inverse="sel-active: .uk-navbar-transparent">
            <div class="uk-container">
                <div uk-navbar>
                    <div class="uk-navbar-left">
                        <a class="uk-navbar-item uk-logo" href="#">Прозрачная панель навигации</a>
                    </div>
                </div>
            </div>
        </nav>
    </div>

    <div class="uk-section-muted">
        <div uk-height-placeholder="!.uk-position-relative .my-header-absolute"></div>
        <div class="uk-section uk-section-secondary">
            <div class="uk-container">
                <p>
                	Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. 
                	Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. 
                	Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.
                </p>
            </div>
        </div>
    </div>

</div>

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

При использовании компонента Height к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

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

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

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

JavaScript

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

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

UIkit.heightMatch(element, options);