我试图使材质卡(纸牌)占据屏幕上的可用空间,然后使其内容(纸牌内容)可滚动,因为内容中的项目占用的空间比可用空间大。
我尝试使用以下CSS,但这只是部分解决方案,因为我对内容使用了固定的高度。
.mat-card-content {
height: 620px;
overflow: auto;
}
这里的问题是屏幕分辨率不同,因此在某些情况下看起来不错,但在其他情况下则会有很多可用空间。
所以这就是我要做的解决方案:
.mat-card {
height: 90% !important;
position: relative;
overflow: hidden;
}
.mat-card-content {
max-height: 100%;
position: absolute;
overflow: auto;
}
这样,我的席卡将占用90%的可用空间,然后内容将占席卡的100%的可用空间。这里的关键是将席卡位置设置为相对,席卡内容位置设置为绝对。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句