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

Высота «Viewport»

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

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

<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: 300"></div>

Высота «Match»

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

<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>