如何使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內容增長。