gpt4 book ai didi

javascript - 只设置一个md-tab的高度

转载 作者:行者123 更新时间:2023-11-28 15:19:07 25 4
gpt4 key购买 nike

这其实很简单,我只是在寻找一种设置高度的方法<md-tab>的内容到100%以模块化的方式。例如,假设我有以下内容:

<body>
<md-content>
<md-tabs>
<md-tab label="Tab A">
<div> I should be the full height of the available space. </div>
</md-tab>
<md-tab label="Tab 2">
<div> I should just be big enough to fit this content </div>
</md-tab>
</md-tabs>
</md-content>
</body>

我可以很容易地得到想要的效果

md-tab-content#tab-content-0 div[md-tabs-template]{
height: 100%
}

但是如果我决定在选项卡 A 之前需要另一个选项卡,它会将样式应用于新选项卡而不是选项卡 A,然后我必须手动更改选择器以修复它。有没有一种方法可以在不制定新指令的情况下完成此操作,即理想情况下只需编辑 html 和 css。

更新:从昨晚开始我才发现我可以使用 sass,所以如果有帮助,请离开。

编辑:这是我想要完成的几张图片,红线表示事件选项卡,蓝色背景表示 div 占用的区域;整个事情就是 html 的主体。

enter image description here

enter image description here

编辑 2:这是我通过调整 Angular Material 演示制作的代码笔:http://codepen.io/ocket8888/pen/YWxGGW .我唯一的解决方案尝试是尝试使用父选择器,几乎每个浏览器都弃用/未实现,所以我没有包括它。

最佳答案

标签会保持一致吗?如果是这样,我很确定你能做到

[label="Tab 2"] div{
height: 100%;
}

关于javascript - 只设置一个md-tab的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38232722/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com