Html 角度材质：整页选项卡大小_Html_Css_Angularjs_Angular Material

Html 角度材质：整页选项卡大小

html css angularjs angular-material

Html 角度材质：整页选项卡大小,html,css,angularjs,angular-material,Html,Css,Angularjs,Angular Material,我试图占据整个页面的空间，但我似乎无法在angular material 0.10.0上获得选项卡的正确高度，除非我添加.ng scope{height:100%；} 有没有更好的方法来实现全页标签完整测试代码：（和）试验 var app_module=angular.module（'app'，['ngMaterial']）； var-app=document.querySelector（“[ng-app=app]”）； app_module.controller（'appControll

我试图占据整个页面的空间，但我似乎无法在angular material 0.10.0上获得选项卡的正确高度，除非我添加

.ng scope{height:100%；}

有没有更好的方法来实现全页标签

完整测试代码：（和）


试验
var app_module=angular.module（'app'，['ngMaterial']）；
var-app=document.querySelector（“[ng-app=app]”）；
app_module.controller（'appController'，function（$scope）{}）；
app_module.config（函数（$mdThemingProvider）{
$mdThemingProvider.theme（“默认”）.primaryPalette（“灰色”）.accentPalette（“靛蓝”）.dark（）；
});
A.
B

我必须补充一点，它在0.9.0上运行良好，这并不是一个更好的方法。是否有理由不希望在.ng范围上使用100%高度

对于初学者来说，100%的高度通常很难把握（不是说你是），因为它很少表现出预期的效果。有一个规范可供使用，但并不是说它真的更好或更差。

您需要使用角度材质的“布局填充”属性

布局填充强制布局元素填充其父容器

<body layout="column">

  <md-tabs flex layout="column" layout-fill class="md-accent" style="background:red" >

    <md-tab flex layout="column" label="A" style="background:green">
      <md-tab-content flex style="background:blue" layout-fill>A</md-tab-content>
    </md-tab>

    <md-tab label="B" layout-fill>
      <md-tab-content flex style="background:cyan" layout-fill>B</md-tab-content>
    </md-tab>

  </md-tabs>

</body>


A.
B

Plunker

以下是如何获取MD选项卡以占据全部可用高度的方法

首先请注意：

AFIK i不可能通过现有的md属性来实现这一点（我已经花了数小时研究这一点）

团队短期内不会对其进行修复（参见2016年6月10日ThomasBurleson的评论：）

解决方案：

确保每个父元素都具有

layout=“column”

和

layout fill

属性（或

布局列

和

布局填充

类）。这包括

如果这与您的用例相关

有关通过COMPOENET路由器创建的自定义组件的重要说明：

在我的例子中，我的html结构是ng outlet->custom component->md card->md tabs

我将

layout=“column”

和

layout fill

添加到

和

，并将

layout=“column”

添加到

。但是，我找不到添加它们的方法（因为它是由Angular动态创建的），所以我最终要做的是将这段（有点粗糙的）代码添加到我的组件控制器（ES6）中，但即使编写ES5也应该可以理解：

来自@nitin的解决方案对我不起作用，可能是因为我使用的是角度材质的版本。我的解决方案是将

md动态高度

属性添加到

md选项卡

标记中

根据此

可以通过将以下属性添加到md tabs元素来实现：

md tabs md stretch tabs=“yes”

您使用的是角度材质0.9.0，我的问题是0.10.0Nice！所以我需要

md选项卡内容

。非常感谢。您应该更新您的答案。使用v1.1.5并复制了此示例，但它对我不起作用。@Guus share a plunkHere有一个很好的解决方案：水平拉伸选项卡标题。我想那不是他们想要的。好吧。它对我有用。我使用的是有角度的材质：1.1.10。

import template from './account.html';

export const accountComponent = {
    template: template,
    controller: accountController,
};

/*@ngInject*/
function accountController (accountService) {
    this.data = accountService.getAccountData();

    /*** THIS IS THE HACKY PART THAT SOLVED IT FOR ME: ***/
    this.$routerOnActivate = function () { // nextRoute
        const classes = document.querySelector('account-component').classList;
        classes.add('layout-column');
        classes.add('layout-fill');
    };
}