AngularJS 材质选项卡 - 移除滚动答案

【问题标题】：AngularJS Material Tabs - Remove ScrollingAngularJS 材质选项卡 - 移除滚动
【发布时间】：2017-03-03 20:05:22
【问题描述】：

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

每当我创建一个选项卡时，子 md-content 元素中的所有内容都会自动具有固定的高度并垂直滚动，而不是仅仅垂直扩展至内容的高度。

我尝试覆盖自动创建的 angular 父容器的 css，更改高度、最小高度和溢出属性，但没有什么能阻止滚动条的固定高度。

有什么想法吗？

此处的示例：http://codepen.io/anon/pen/BWzBGL。

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>

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

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

这是工作的codepen

更新：

内滚动是可见的，因为内容大于包装，如果要禁用内滚动，可以添加overflow-y: hidden，但要准备好用户将看不到所有内容。

Updated codepen

【讨论】：

谢谢，但这不起作用。内容仍有滚动条
如果看不到内容，移除滚动条有什么用？
那么，您希望如何显示您的内容？如果您有很多内容（大于用户窗口），用户将不会看到所有内容。要解决这个问题，您可以添加一个滚动条，但您需要这两个：显示所有分辨率的大内容并且没有滚动条。这是不可能的！