Question

这实际上非常简单，我只想找到一种方法，以模块化的方式将<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%
}

我可以轻松地用

获得所需的效果

<transactionManagerLookup
  class= "com.mycompany.transaction.manager.MyTransactionManagerLookupClass"
  properties="" propertySeparator=":"/>

但是如果我决定在标签A之前我想要另一个标签，它会将样式应用到新标签而不是标签A，然后我必须手动更改选择器来修复它。有没有办法在不制定新指令的情况下实现这一目标，即理想情况下只需编辑html和css。

更新：刚刚发现我可以在昨晚使用sass，如果有帮助的话，那就太麻烦了。

编辑：这里有几张我想要完成的图片，红线表示活动标签，蓝色背景表示div占用的区域;整个事情就是html的主体。

编辑2：这是我通过调整角度材质演示而制作的编码：http://codepen.io/ocket8888/pen/YWxGGW。我尝试使用解决方案的唯一尝试是尝试使用父选择器，这些选择器几乎在每个浏览器中都被弃用/未实现，所以我没有包含它。

Answer 1

标签是否保持一致？如果是这样，我很确定你能做到

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

Answer 2

我认为您希望将第一个标签定位为100％...所有其他标签应该采用auto，这可能是父设置的内容：

.md-tabs .md-tab:first-child {
    height: 100%
}

不确定这些选择器是否与您的最终HTML匹配，但是您应该通过定位“：first-child”获得想法

设置仅一个md-tab的高度

2 个答案: