跳至主要內容

文件

高度

定義元素的高度，取決於視窗或使不同元素的高度一致。

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