高度

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

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` 是 _主要_ 选项，如果它是属性值中唯一的选项，则可以省略其键。

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

文档

高度