UI-GRID 网格高度占屏幕面积的百分比
UI-GRID Height Of Grid Percentage Of The Screen Area
处理 ui 网格高度的最佳方法是什么。我们希望它占据屏幕的 85%,页脚占据 15%。
为什么我将网格的高度设置为 85%,它没有任何作用。
当我更改 px 高度时,会将屏幕向下推。
谢谢
当定义为百分比时,网格的高度是相对于其父容器的高度。这与任何其他 HTML 元素相同。如果父元素只有有格子在里面,那85%就没什么了。
这是因为网格虚拟化了它的内容。尽管它的数据集中有 50 万行,但它不知道一次应该显示多少行。
幸运的是,在您的情况下,使用 viewport percentage 设置网格高度可能会起作用:
.grid {
height: 98vh;
}
这告诉网格几乎是浏览器视口的整个高度(请注意,100vh 有点太多了)。
查看这个 plunker 的演示:http://embed.plnkr.co/65ScOLedYpm1rSKztQkE/preview
post 中有更多信息:http://brianhann.com/make-ui-grid-take-up-the-whole-page/
希望对您有所帮助!
处理 ui 网格高度的最佳方法是什么。我们希望它占据屏幕的 85%,页脚占据 15%。
为什么我将网格的高度设置为 85%,它没有任何作用。
当我更改 px 高度时,会将屏幕向下推。
谢谢
当定义为百分比时,网格的高度是相对于其父容器的高度。这与任何其他 HTML 元素相同。如果父元素只有有格子在里面,那85%就没什么了。
这是因为网格虚拟化了它的内容。尽管它的数据集中有 50 万行,但它不知道一次应该显示多少行。
幸运的是,在您的情况下,使用 viewport percentage 设置网格高度可能会起作用:
.grid {
height: 98vh;
}
这告诉网格几乎是浏览器视口的整个高度(请注意,100vh 有点太多了)。
查看这个 plunker 的演示:http://embed.plnkr.co/65ScOLedYpm1rSKztQkE/preview
post 中有更多信息:http://brianhann.com/make-ui-grid-take-up-the-whole-page/
希望对您有所帮助!