添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

UIkit3.x文档

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

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
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 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 class = "uk-card uk-card-default uk-card-body" > Lorem Ipsum </ div > </ div > < div class = "uk-card uk-card-default uk-card-body" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ div > </ div > < div class = "uk-card uk-card-default uk-card-body" > Lorem Ipsum </ div > </ div > </ 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 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 > UIkit.heightMatch(element, options);