Question

我正在测试一些AngularJS Material的东西，我在开发标签时遇到了麻烦。

每当我制作一个标签时，子md-content元素中的所有内容都会自动具有垂直滚动的固定高度，而不是仅垂直扩展到内容的高度。

我已经尝试覆盖自动创建的angular的父容器的css，更改高度，最小高度和溢出属性，但没有任何东西阻止使用滚动条固定高度。

有什么想法吗？

HTML：

<body ng-app="tableApp"> 

    <main>

        <md-content>

            <md-toolbar>

                <div class="md-toolbar-tools">

                    <md-menu flex>

                        <md-button aria-label="Menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">

                            <md-icon md-menu-origin class="material-icons"><span class="fa fa-bars fa-lg"></span></md-icon>

                        </md-button>

                        <md-menu-content width="3">

                            <md-menu-item>

                                <md-button ng-click="ctrl.menuItemClick($index)">

                                    <div layout="row">

                                        <p flex>Page One</p>

                                    </div>

                                </md-button>

                            </md-menu-item>

                            <md-menu-item>

                                <md-button ng-click="ctrl.menuItemClick($index)">

                                    <div layout="row">

                                        <p flex>Page Two</p>

                                    </div>

                                </md-button>

                            </md-menu-item>

                            <md-menu-item>

                                <md-button ng-click="ctrl.menuItemClick($index)">

                                    <div layout="row">

                                        <p flex>Page Three</p>

                                    </div>

                                </md-button>

                            </md-menu-item>

                        </md-menu-content>

                    </md-menu>

                    <p>AngularJS Material Testing</p>

                    <md-menu md-position-mode="target-right target">

                        <md-button aria-label="Settings" class="md-icon-button" ng-click="$mdOpenMenu($event)">

                            <md-icon md-menu-origin class="material-icons"><span class="fa fa-gear fa-lg"></span></md-icon>

                        </md-button>

                        <md-menu-content width="3">

                            <md-menu-item>

                                <md-button ng-click="ctrl.menuItemClick($index)">

                                    <div layout="row">

                                        <p flex>Page One</p>

                                    </div>

                                </md-button>

                            </md-menu-item>

                            <md-menu-item>

                                <md-button ng-click="ctrl.menuItemClick($index)">

                                    <div layout="row">

                                        <p flex>Page Two</p>

                                    </div>

                                </md-button>

                            </md-menu-item>

                            <md-menu-item>

                                <md-button ng-click="ctrl.menuItemClick($index)">

                                    <div layout="row">

                                        <p flex>Page Three</p>

                                    </div>

                                </md-button>

                            </md-menu-item>

                        </md-menu-content>

                    </md-menu>

                </div>

            </md-toolbar>

            <md-tabs md-border-bottom>
              <md-tab label="Tab One">
                <md-content class="md-padding">

                  <h1 class="md-display-1">Tab One</h1>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  </md-content>

                </md-tab>

              <md-tab label="Tab Two">
                <md-content class="md-padding">

                  <h1 class="md-display-1">Tab Two</h1>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  </md-content>

                </md-tab>

              <md-tab label="Tab Three">
                <md-content class="md-padding">

                  <h1 class="md-display-1">Tab Three</h1>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  </md-content>

                </md-tab>

            </md-tabs>

        </md-content>

    </main>

Answer 1

您需要将 md-content ：<md-content layout="column">和flex属性的<md-tabs md-border-bottom flex>属性添加到 md-tabs ： overflow-y: hidden。

这是工作codepen

<强>更新

内部滚动是可见的，因为内容大于包装器，如果要禁用内部滚动，可以添加var selector = $('.class1 .class2 .class3 .class4').find( '.class5').filter(function() { return $(this).css('display') == 'block'; });，但请准备好用户不会看到所有内容。

Updated codepen

AngularJS材料选项卡 - 删除滚动

1 个答案: