如何使有角度的材料卡占据可用的垂直空间并使其内容可滚动

野猪

我试图使材质卡(纸牌)占据屏幕上的可用空间,然后使其内容(纸牌内容)可滚动,因为内容中的项目占用的空间比可用空间大。

我尝试使用以下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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使TextBox填充所有可用空间而又不调整其内容的大小?

如何制作带有固定离子卡头和可滚动离子卡内容的离子卡?

如何使Polymer元素占据页面上的所有垂直空间?

如何从可用硬盘空间中永久删除所有内容并使其无法恢复

在WPF中有可用空间时,调整DataGrid的大小以适合其内容

使弹性项目拉伸全高并使其内容垂直居中

如何使网页占据整个屏幕而不影响其内容大小

固定高度的Bootstrap卡,带有垂直可滚动的卡文字

如何使滚动窗格适应其内容?

如何使div占据所有可用高度?

Android-AlignParentBottom占据了所有可用空间

卡片在颤动中占据了所有垂直空间

如何调整垫桌的高度,使其填满剩余的垂直空间,并且任何多余的空间都可以滚动?

如何使输入元素占据固定宽度元素旁边的可用空间?

如何使Vuetify v-flex占据剩余的可用空间

如何在另一个页面中包含一个 html 页面并使其内容可抓取

如何使 Nb 卡可滚动

基于内容的可滚动垂直导航栏

如何使元素隐藏,使其占据空间并使其出现在该位置?

如何使图表内容区域占据可用的最大区域?

如何在不指定div宽度的情况下使div占据所有可用的剩余水平空间?

如何计算剩余的可用垂直空间

带有可扩展行的角度材料表,在更改选项卡时自动扩展 使用 stackBlitz 示例

如何修复按钮,使其不滚动内容

如何正确修复 ScrollView 使其行为类似于常规视图但具有垂直滚动?

如何使用侧按钮而不是选项卡标题来实现有角度的材料选项卡?

带有角材料的垂直选项卡

如何使ContentStack中带有StackLayout的内容可滚动?

具有Angular Material动态高度选项卡的可滚动内容元素