跳到主要内容

文档

Height

根据视口定义元素高度，或让不同元素的高度保持一致。

UIkit 的 Height 组件提供三种设置高度的方式：使用简单的固定高度工具类、根据视口设置，或让不同元素的高度相互匹配。

用法

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, CSS Selector false 从元素高度中减去元素自身（设为 true）或指定元素（CSS 选择器）的顶部偏移量。
offset-bottom Boolean, Number, Pixel, CSS Selector false 从元素自身高度或指定元素的高度中减去紧随其后的兄弟元素的高度（设为 true）、指定百分比（数字）或像素（px）值。
expand Boolean false 扩展元素高度，让内容较少的页面也能填满视口。
min Number 0 设置最小高度。当所有子元素都采用绝对定位时很有用。
property String min-height 要设置的 CSS 属性。（min-height、height、max-height）
media Boolean, Number, String false 组件生效的条件——整数宽度（如 640）、断点（如 @s、@m、@l、@xl）或任意合法的媒体查询（如 (min-width: 900px)）。 
<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: 300"></div>

你可以在 Height Viewport 和 Height Expand 的测试页中查看示例。

高度匹配

要将容器的所有子元素扩展到相同高度（无论其内容多少），例如在栅格中，添加 uk-height-match 属性。你可以通过为属性设置 target 或 row 选项来改变高度匹配行为。了解更多

选项 值 默认值 说明
target String > * 需要参与匹配的元素。
row Boolean true 默认只匹配同一行中的项目。例如，当栅格列扩展到 100% 宽度时，它们的高度将不再相互匹配。在较窄视口中它们会纵向堆叠时，这一行为是合理的。 
<div uk-height-match>
    <div></div>
    <div></div>
</div>

target 是 Primary 选项，当属性值中只有这一个选项时，可以省略它的键名。

<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-placeholder: SELECTOR 属性，其中选择器指向具有所需高度的元素。

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

例如，当页面中存在绝对定位的透明导航栏时，可能需要一个与导航栏同高的占位元素，以便在正常内容流中将后面的元素向下推移。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

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

    <div class="tm-header 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="#">Transparent Navbar</a>
                    </div>
                </div>
            </div>
        </nav>
    </div>

    <div class="uk-section-muted">
        <div uk-height-placeholder="!.uk-position-relative .tm-header"></div>
        <div class="uk-section">
            <div class="uk-container">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
            </div>
        </div>
    </div>

</div>

组件选项

这些选项都可以通过组件属性传入。多个选项之间用分号分隔。了解更多

JavaScript

进一步了解 JavaScript 组件。

初始化

UIkit.heightMatch(element, options);