高度／Height

# 高度／Height

<p class="uk-text-lead">根据视口定义元素的高度或匹配不同元素的高度。</p>

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

***

## Usage-用法

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

| Class                                             | 描述                                                           |
|:--------------------------------------------------|:------------------------------------------------------|
| `.uk-height-1-1`                                  | 此类适用100％的高度。只在父元素设置了具体的高度时才有效。 |
| `.uk-height-small `<br> `.uk-height-max-small `   | 设置为 _150px_的高度或最大高度。   |
| `.uk-height-medium `<br> `.uk-height-max-medium ` | 设置为 _300px_的高度或最大高度。   |
| `.uk-height-large `<br> `.uk-height-max-large `   | 设置为 _450px_的高度或最大高度。   |

```html
<div class="uk-height-small"></div>
```

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

***

## Viewport height-视口高度

添加 `uk-height-viewport` 属性创建一个填充整个视口高度的容器。您可以通过向属性添加 `offset-top`, `offset-bottom` 或 `expand` 选项来更改高度行为。 [了解更多](javascript.md#component-configuration)

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

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

您可以在 [高度视口 ](../assets/uikit/tests/height-viewport.html) 和 [高度扩展](../assets/uikit/tests/height-expand.html)测试页中查看示例。

***

## Match height-匹配高度

要将容器的所有子级扩展到相同的高度，而不考虑内容多少（例如在网格内），请添 `uk-height-match` 属性。通过将属性设置为 `target` 或 `row` 可以更改高度匹配行为。 [了解更多](javascript.md#component-configuration)

| 选项   | 可用值   | 默认值 | 描述                 |
|:---------|:--------|:--------|:----------------------------|
| `target` | String  | `> *`   | 应该匹配的元素。 |
| `row`    | Boolean | `true`  | 默认情况下，只匹配同一行中的项目高度。例如，一旦将某个网格列的宽度扩展为100％，那么它与其它网格列高度将不再保持相同。例如它们垂直堆叠在较窄的视口中这类情况，这是非常有实际意义的。 |

```html
<div uk-height-match>
    <div></div>
    <div></div>
</div>
```

`target` 是 _Primary_ 选项，如果它是属性值中的唯一选项，则可以省略其键。

```html
<span uk-height-match=".my-class"></span>
```

***

### 匹配卡片

您还可以将容器中的特定元素（如卡片）作为目标并进行匹配。只需将 `target: SELECTOR` 选项添加到属性即可。

```html
<div uk-grid uk-height-match="target: SELECTOR">...</div>
```

```example
<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` 选项添加到属性。

```html
<div uk-grid uk-height-match="row: false">...</div>
```

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

***

## Component options-组件选项

下表列出了 `uk-height-match` 属性的可用设置。 [了解更多](javascript.md#component-configuration)

| 选项   | 可用值        | 默认值 | 描述                                                                                 |
|:---------|:-------------|:--------|:----------------------------------------------------------------|
| `target` | CSS selector | `> *` | 应该匹配的元素。默认情况下，直接子项目将匹配。 |
| `row`    | Boolean      | `true`  | 如果目标换行成多行，则仅匹配同一行内的网格列。 |

## JavaScript

了解有关 [JavaScript 组件](javascript.md#programmatic-use)的更多内容。

### 初始化

```js
UIkit.heightMatch(element, options);
```