跳到主要内容

文档

高度

根据视口定义元素的高度或匹配不同元素的高度。

UIkit 的高度组件提供了三种设置高度的选项：使用简单的固定高度实用程序类，取决于视口或通过匹配不同元素的高度。

用法

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>
小
中
大
<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 布尔值，CSS 选择器 false 从其高度中减去元素（true）或给定元素（CSS 选择器）的偏移顶部。
offset-bottom 布尔值，数字，像素，CSS 选择器 false 从元素自身的高度中减去紧跟在该元素之后的兄弟元素的高度（true），给定的百分比（数字），像素 (px) 值或给定元素的高度。
expand 布尔值 false 扩展元素的高度，使短页面填充视口。
min-height 数字 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="expand: true"></div>

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

您可以在 高度视口 和 高度扩展 的测试中查看示例。

匹配高度

要将容器的所有子元素扩展到相同的高度，而不管其内容如何，例如在网格内部，请添加 uk-height-match 属性。您可以通过将 target 或 row 选项设置为该属性来更改高度匹配行为。了解更多

选项 值 默认值 描述
target 字符串 > * 应该匹配的元素。
row 布尔值 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);