高度

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

UIkit的Height组件提供了三种设置高度的方式：使用简单的固定高度实用程序类、具体高度取决于视口高度或匹配不同元素的高度。

用法

UIkit提供了许多有用的class来更改元素的高度。

Class	Description
`.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 选项来更改高度行为。了解更多

Option	Value	Default	Description
`offset-top`	Boolean	`false`	从元素的高度减去元素的顶部偏移量。
`offset-bottom`	Boolean, Number, Pixel	`false`	从元素本身的高度或给定元素的高度减去紧跟在元素后面的同级元素的高度（true）、给定的百分比（Number）、像素（px）值。
`expand`	Boolean	`false`	展开元素的高度，使一个简短的页面填满视区。
`min-height`	Number	`0`	S设置最小高度。如果所有子元素都是绝对定位，那么此选项很有用。

<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 可以更改高度匹配行为。了解更多

Option	Value	Default	Description
`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-match 属性的可用设置。了解更多

Option	Value	Default	Description
`target`	CSS selector	`> *`	应该匹配的元素。默认情况下，直接子项目将匹配。
`row`	Boolean	`true`	如果目标换行成多行，则仅匹配同一行内的网格列。

JavaScript

了解有关JavaScript 组件的更多内容。

初始化

UIkit.heightMatch(element, options);

UIkit3.x文档