如何使MD-标签长度采取一切父长度

Question

我有我的项目，但我的问题，里面的下列选项卡的标签是不能覆盖所有的空间

<fieldset class="form-group userEditGrid" ng-if="proj.checkEditProjectPanelCriteria(proj.selectionRow)" style="top:42%; height: 55%; !important"> 
    <legend style="color:#d77509;font-weight:bold; border:0px; width:10%;" > {{proj.getMode()}}</legend> 
     <div ng-cloak="" class="tabsdemoDynamicHeight"> 
      <md-content> 
       <md-tabs md-dynamic-height="" md-border-bottom="" md-selected="proj.selectedLevelTabs" > 
        <md-tab label="General Information" ng-disabled = "proj.isFireProtectionPanelOpen() || proj.isAddDocumentPanelOpen()"> 
         <form name="editForm"> 
          <md-content class="md-padding"> 
           <div class="row" disable-all = "proj.ViewMode == 1"> 
            <div class="row"> 
             <div class="col-sm-2" ng-class="{ 'has-error': editForm.projanyname.$dirty && editForm.projectname.$error.required }"> 
              <md-input-container class="md-block" > 
               <label for="projectname">Project Name *</label> 
               <input type="text" name="projectname" id="projectname" class="form-control" ng-model="proj.copyProjectRow.projectName" required=""> 
               <span ng-show="editForm.projectname.$dirty && editForm.projectname.$error.required" class="help-block">project name is required</span> 
              </md-input-container> 
             </div> 
            </div> 
           </div> 
          </md-content> 
         </form> 
        </md-tab> 
        <md-tab> 
         <md-content class="md-padding"> 
         <div class="row"> 
          <jsp:include page="levels/level1.jsp" /> 
         </div> 
         </md-content> 
        </md-tab> 
       </md-tabs> 
      </md-content> 
     </div> 
</fieldset> 

我怎么能做出的长度标签占据了所有的空间？

注：我把这个文件形式的其他JSP文件

<div> 
    <jsp:include page="editProject.jsp" /> 
</div> 

Answer 1

这是我该怎么做，以填补MD-攀主体的100％高度：

首先，我们需要创建一个CSS类，使MD-标签内容100％高度的第一个孩子：

md-tab-content > div { 
    height: 100%; 
} 

然后标签的结构必须是这样的：

<md-tab> 
    <md-tab-label>Tab title label</md-tab-label> 
     <md-tab-body> 
      <div layout-fill layout="column"> 
       <p>This will be full height</p> 
      </div> 
    </md-tab-body> 
</md-tab> 

请注意，我们必须使用<md-tab-body>内的容器上的布局填充以使其增长100％的高度。如果我们需要在容器中放置更多的孩子布局，我们必须使用layout="column"来垂直增长，并使用flex属性作为我们需要的布局结构。

我希望这能解决您的问题！仅使用flex而不使用CSS类可能会使md-tab-body内容增长。