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-tab主体的100％高度：

首先，我们需要创建一个CSS类，使md-tab-content 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>内的容器上使用layout-fill，以使其以100％的高度增长。如果我们需要在容器中放置更多子布局，我们必须使用layout="column"使它们垂直增长并使用flex属性，因为我们需要布局结构。

我希望这能解决你的问题！如果只使用flex而不使用CSS类，md-tab-body内容的增长可能是不可能的。

如何使md-tabs长度占用所有父长度

1 个答案: