根据视口定义元素的高度或匹配不同元素的高度。
UIkit的Height组件提供了三种设置高度的方式,包含:拥有固定高度值的class、高度取决于视口高度的class,以及与指定的某个元素高度保持一致的class。
UIkit提供了许多有用的class来更改元素的高度。
<
div
class
=
"uk-child-width-1-3@s"
uk-grid
>
<
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
class
=
"uk-height-medium uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle"
>
Medium
</
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
>
Boolean, Number, Pixel
false
从元素本身的高度或给定元素的高度减去紧跟在元素后面的同级元素的高度(true)、给定的百分比(Number)、像素(px)值。
expand
Boolean
false
展开元素的高度,使一个简短的页面填满视区。
min-height
Number
S设置最小高度。如果所有子元素都是绝对定位,那么此选项很有用。
<
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
可以更改高度匹配行为。
了解更多
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem Ipsum