高さ

ビューポートに応じて要素の高さを定義したり、異なる要素の高さを一致させたりします。

UIkitの高さコンポーネントは、高さを設定するための3つのオプションを提供します。単純な固定高さユーティリティクラスを使用する、ビューポートに依存する、または異なる要素の高さを一致させる方法です。

使用方法

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>

Height Viewport と Height Expand のテストで例を確認できます。

高さの一致

コンテナのすべての子要素を、コンテンツに関係なく同じ高さに拡張するには（たとえば、グリッド内）、`uk-height-match`属性を追加します。属性に`target`または`row`オプションを設定することで、高さの一致動作を変更できます。詳細はこちら

オプション	値	デフォルト	説明
`target`	文字列	`> *`	一致させる必要がある要素。
`row`	ブール値	`true`	デフォルトでは、同じ行のアイテムのみが一致されます。たとえば、グリッドカラムの幅が100%になると、高さは一致しなくなります。これは、たとえば、狭いビューポートで垂直にスタックする場合に意味があります。

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

`target`は *プライマリ* オプションであり、属性値にオプションが1つしかない場合は、キーを省略できます。

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

カードの一致

コンテナ内の特定の要素（カードなど）をターゲットにして一致させることもできます。属性に `target: セレクター` オプションを追加するだけです。

<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: セレクター`属性を追加します。ここで、セレクターは必要な高さを持つ要素をターゲットにします。

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

UIkit.heightMatch(element, options);

ドキュメント

高さ